How to get the same value populated in 2nd picklist if the value is selected on 1st picklist using J-CodePudding

I have 2 picklists with the same values. In the 1st picklist, it has more values than the 2nd picklist. So when the user selects some value from the 2nd picklist, it is showing the same value in the 1st one.

But I would like to show if the value Testing 1 is selected in picklist 1 then the same value should show in the 2nd picklist. If the user selects Testing 2 from the 1st picklist then the 2nd picklist should also show the same value.

Not sure how to achieve this. Could someone help me with this?

var sMap = {};

sMap["ABC"] = ["Test2ABC", "Style"];
sMap["CDE"] = ["Test2CDE", "style"];
sMap["EFG"] = ["Test2EFG", "style"];


function onChangeRadio(ele) {
  var id = $(ele).attr("id");
  var type = $(ele).attr("type");
  var tagName = $(ele).prop("tagName");
  if (tagName.toLowerCase() == "select") {
    var val = $(ele).val();
    $('#codes').append($("<option value='"   val   "'>"   val   "</option>"));
    setsc(val);
  } else {
    var Code = Object.keys(sMap).find(key => sMap[key].includes(id));
    setsc(Code);
  }

}


function setsc(val) {
  $('[name="Code"]').val(val);
  window.dispatchEvent(new Event('resize'));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td id="TD1">
  <input type="hidden" name="Test1" id="hidden-test1" value="">
  <input list="codes" name="Code" id="slist" >
  <datalist id="codes">
             <option value="">--  Choose one  --</option>
             <option value="ABC">Testing 1</option>
             <option value="CDE">Testing 2</option>
             <option value="EFG">Testing 3</option>
             <option value="ABC">worker</option>         
             <option value="NAP">Port</option>       
          </datalist>
</td>

<select name="T-Test2" id="Test2" onchange="onChangeRadio(this)">
  <option value="" selected="">Choose one</option>
  <option value="ABC">Testing 1</option>
  <option value="CDE">Testing 2</option>
  <option value="EFG">Testing 3</option>
</select>

CodePudding user response：

You need to detect the onchange event on the datalist. You do that by checking the input event on the <input>.

You can use the inputType on the InputEvent to filter out any unwanted onInput events. This is "insertReplacementText" on Firefox 81 and null for Chrome/Edge 86. If you need to support IE11 you will need to validate the value is valid.

    $("#slist").on("input", (event) => {
    // Detect change on the datalist
      if (event.inputType == "insertReplacementText" || event.inputType == null) {
         console.log(event.target.value);
    })

Other explains areinside the below code.

var sMap = {};

sMap["ABC"] = ["Test2ABC", "Style"];
sMap["CDE"] = ["Test2CDE", "style"];
sMap["EFG"] = ["Test2EFG", "style"];


function onChangeRadio(ele) {
  var id = $(ele).attr("id");
  var type = $(ele).attr("type");
  var tagName = $(ele).prop("tagName");
  if (tagName.toLowerCase() == "select") {
    var val = $(ele).val();
    $('#codes').append($("<option value='"   val   "'>"   val   "</option>"));
    setsc(val);
  } else {
    var Code = Object.keys(sMap).find(key => sMap[key].includes(id));
    setsc(Code);
  }

}


function setsc(val) {
  $('[name="Code"]').val(val);
  window.dispatchEvent(new Event('resize'));
}


$("#slist").on("input", (event) => {
  // Detect change on the datalist
  if (event.inputType == "insertReplacementText" || event.inputType == null) {
    let selectedValue = event.target.value;
    if (!selectedValue) return;

    // Get the text of the option associate with the value
    let optionData = $(`#codes > option[value="${selectedValue}"]`).text();
    console.log(optionData);


    // Append in the <select>
    // if the otpion is not existed, use a temporary attribute, so we can clear it out later
    let selectedOption = $(`#Test2 > option[value="${selectedValue}"]`)[0];
    if (selectedOption) {
      // selected option exists, show it
      selectedOption.selected = 'selected';
    } else {
      // selected option doesn't exist, add then show
      // Clear the temporary options out of the select 
      $('#Test2 > [temporary="true"]').remove();
      $('#Test2').append($('<option>', {
        value: selectedValue,
        text: optionData,
        selected: true,
        temporary: true,
      }));
    }
  }
});

// Whenever you change the value on the select, clear out the temporary options
$('#Test2').on('change', (e) => {
  $('#Test2 > [temporary="true"]').remove();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td id="TD1">
  <input type="hidden" name="Test1" id="hidden-test1" value="">
  <input list="codes" name="Code" id="slist" >
  <datalist id="codes">
     <option value="">--  Choose one  --</option>
     <option value="ABC">Testing 1</option>
     <option value="CDE">Testing 2</option>
     <option value="EFG">Testing 3</option>
     <option value="HIJ">worker</option>         
     <option value="NAP">Port</option>       
  </datalist>
</td>

<select name="T-Test2" id="Test2" onchange="onChangeRadio(this)">
  <option value="" selected="">Choose one</option>
  <option value="ABC">Testing 1</option>
  <option value="CDE">Testing 2</option>
  <option value="EFG">Testing 3</option>
</select>