Как я могу изменить значение опции выбора в штучной упаковке на основе выбора другого поля выбора

Question

В своем коде ниже я пытаюсь изменить параметры второго поля выбора в зависимости от того, что я выбрал в первом. Поэтому, когда я выбираю value="1" из первого поля выбора, второе поле выбора должно измениться на value="3" и т. Д.

Вот код:

$(function() {
  $('#itemconditionid').change(function() {
    $('#meta_itemcondition').val($(this).val())
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="itemconditionid">
  <option value="">Choose</option>
  <option value="1">New</option>
  <option value="2">Used</option>
</select>

<select id="meta_itemcondition">
  <option value="">Choose</option>
  <option value="3">Yeah! It's New Baby</option>
  <option value="4">Ouch! I hate used stuff</option>
</select>

Answer 1

Используйте selectedIndex. Изменить второй вариант раскрывающегося списка на основе этого индекса.

$(function() {
  $('#itemconditionid').change(function() {
    $("#meta_itemcondition").prop('selectedIndex', $(this)[0].selectedIndex);
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="itemconditionid">
  <option value="">Choose</option>
  <option value="1">New</option>
  <option value="2">Used</option>
</select>

<select id="meta_itemcondition">
  <option value="">Choose</option>
  <option value="3">Yeah! It's New Baby</option>
  <option value="4">Ouch! I hate used stuff</option>
</select>

Answer 2

Вы можете добавить еще один атрибут к каждому из параметров в первом выборе (в данном случае data-value) и использовать значение атрибута, чтобы определить значение второго выбора:

$(function(){
    $('#itemconditionid').change(function(){  
	$('#meta_itemcondition').val( $(this).children('option:selected').data('value') )
    })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="itemconditionid">
    <option value="">Choose</option>
    <option value="1" data-value="3">New</option>
    <option value="2" data-value="4">Used</option>
    </select>

<select id="meta_itemcondition">
    <option value="">Choose</option>
    <option value="3">Yeah! It's New Baby</option>
    <option value="4">Ouch! I hate used stuff</option>
    </select>