Question 270023 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How do I make the selected option of a SELECT field the same another select field Onchange?

So I have a select field called TRIP ID whose options come from a database. I also have another select field called APS Weight which has three options. STA, STB, STC – but the values of these 3 options is actually numbers not STA, STB, STC. What STA, STB and STC is, is actually the InnerHTML of these select options.

My issue is that i want to select a TRIP ID right, then onChange the selected option of APS Weight becomes the first three letters of the value of TRIP ID.

 <select name="tripid" id="tripid" style="width: 300px"
        onchange="document.getElementById('aps').value=tripid.value.slice(0,3)">

The Select fields

I think my code isnt working because. The value of the options on APS Weight is actually numbers and not strings.

Tags:

3

Answers


  1. 0

    You need to match the value of the selected option in the $('#tripid') dropdown with the text content of the options in the $('#aps') dropdown.

    Here are two solutions (JQuery using option:contains and pure Javascript using option.text).

    JQuery:

    $("#tripid").change(function() {
  var val = this.value.slice(0, 3);
  $("#aps option:contains(" + val + ")").attr("selected", "selected");
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="tripid" id="tripid" style="width: 300px">
  <option>STA-1</option>
  <option selected="selected">STA-2</option>
  <option>STA-3</option>
  <option>STB</option>
  <option>STC-1</option>
  <option>STC-2</option>
</select>

<select id="aps">
  <option value=1>STA</option>
  <option value=2>STB</option>
  <option value=3>STC</option>
</select>

    Pure Javascript:

    function update(value) {
  const dd = document.getElementById('aps');
  aps.selectedIndex = [...dd.options].findIndex(option => option.text === value);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="tripid" id="tripid" style="width: 300px" onchange="update(this.value.slice(0,3))">
  <option>STA-1</option>
  <option selected="selected">STA-2</option>
  <option>STA-3</option>
  <option>STB</option>
  <option>STC-1</option>
  <option>STC-2</option>
</select>

<select id="aps">
  <option value=1>STA</option>
  <option value=2>STB</option>
  <option value=3>STC</option>
</select>
    Login or Signup to reply.
  2. 0

    If you can add a data attribute to the options, you can refer the same in the onChange method.

    <select id="aps">
<option value="0" data-value="STC">STC</option>
</select>

<select name="tripid" id="tripid" style="width: 300px"  onchange="document.getElementById('aps').options[document.getElementById('aps').selectedIndex].dataset.value=tripid.value.slice(0,3)">
    Login or Signup to reply.
  3. 0 
    Hope this will help!
<script>

const setAps = () => {

    const select = document.getElementById("tripid");
    const selectedOption = select.options[select.selectedIndex];
    const selectedText = selectedOption.text;
    const aps = selectedText.slice(0,3);

    const apsSlect = document.getElementById("aps");
    const textToSelect = aps;

    for (var i = 0; i < apsSlect.options.length; i++) {
        if (apsSlect.options[i].text === textToSelect) {
            apsSlect.selectedIndex = i;
            break;
        }
    }

}

</script>

<select name="tripid" id="tripid" onChange="setAps()" >
    <option>- Select-</option>
    <option value="1">STAABC Trip Location 1</option>
    <option value="2">STCABC Trip Location 2</option>
    <option value="3">STCABC Trip Location 3</option>
    <option value="4">STAABC some Location</option>
    <option value="5">STBXYZ some Location</option>
    <option value="6">STBXYZ some Location 2</option>
</select>

<select name="aps" id="aps" >
    <option>- Select APS Weight-</option>
    <option value="1">STA </option>
    <option value="2">STB</option>
    <option value="3">STC</option>
</select>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search