CODEWITHSUNDEEP
javascriptjqueryhtml
Husein
Husein

Reputation: 41

Select box event

I have 2 select boxes. First I choose an item from Item 1. If I check the checkbox from item 2, the value of select box from item 2 should be the same as select box from item 1, but it does not work. What's wrong?

Here is my code:

<table>
  <tr>
    <th>Item 1</th>
  </tr>
  <tr>
    <td>
      <select id="item1">
        <option id=1>Banana</option>
        <option id=2>Apple</option>
        <option id=3>Phineapple</option>
      </select>
    </td>
  </tr>

  <tr>

    <th>Item 2</th>
  </tr>
  <tr>
    <td>
      <input type="checkbox" id="chk" />
      <select id="item2">
        <option id=1>Banana</option>
        <option id=2>Apple</option>
        <option id=3>Phineapple</option>
      </select>
    </td>
  </tr>

</table>

Upvotes: 0

Views: 133

Answers (3)

Francisco Hanna
Francisco Hanna

Reputation: 1137

Since you did not specify that you were using Jquery, here is a vainilla Javascript solution:

let oneSelect = document.getElementById('oneSelect');
let anotherSelect = document.getElementById('anotherSelect');

function checkTheOtherOne(event) {
  let isChecked = event.target.checked;
  if (isChecked && getOneSelectValue() != getAnotherSelectValue()) {
      for (let i = 0; i < anotherSelect.childNodes.length; i++) {
          const option = anotherSelect.childNodes[i];
          if (option.value === getOneSelectValue()) {
              option.selected = true;
              break;
          }
      }
  }

  function getOneSelectValue() {
      return oneSelect.value;
  }

  function getAnotherSelectValue() {
      return anotherSelect.value;
  }
}
<label>
    One select:
    <select id="oneSelect">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
</label>


<label>
    <input value="true" type="checkbox" id="checkbox" oninput="checkTheOtherOne(event)">
</label>


<label>
    Another select:
    <select id="anotherSelect">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
</label>

As the first comment has pointed out, remember that the id in a document must be unique.

Upvotes: 1

ravibagul91
ravibagul91

Reputation: 20755

Note: If you want use Id's for option try to add unique Id's, in your case it is duplicated, also Id's should be in string like <option id="1">Banana</option>, you are passing numbers directly. If possible don't use numbers for Id's

You can do this in 2 ways,

Scenario 1:

You have two select box and a checkbox. On first select box change you need to check if checkbox is checked or not, if checkbox is checked then copy the select box value to another like below,

$("#item1").on('change',function(){

  if($("#chk").is(":checked")){
    $("#item2").val($(this).val());
  }
})

Demo

Scenario 2:

If you want to copy first select box value to another on the base of checkbox status, you can do like this,

$('#chk').change(function(){
  if($(this).is(':checked')){
    $('#item2').val($('#item1').val());
  }
});

Upvotes: 1

Ngorld
Ngorld

Reputation: 856

Simple here. Try this :

$('#chk').change(function(){
  if($(this).is(':checked')){
    $('#item2').val($('#item1').val());
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Item 1</th>
  </tr>
  <tr>
    <td>
      <select id="item1">
        <option id=1>Banana</option>
        <option id=2>Apple</option>
        <option id=3>Phineapple</option>
      </select>
    </td>
  </tr>

  <tr>

    <th>Item 1</th>
  </tr>
  <tr>
    <td>
      <input type="checkbox" id="chk" />
      <select id="item2">
        <option id=1>Banana</option>
        <option id=2>Apple</option>
        <option id=3>Phineapple</option>
      </select>
    </td>
  </tr>

</table>

Upvotes: 1

Related Questions