java - 根据第一个下拉列表的选择设置第二个框的下拉值

Question

我有 2 个下拉列表声明如下:

    <label for="select-choice-1" class="select">Customer Product Name</label>
    <select name="select-choice-1" id="select-choice-1" onchange="selectTransport(this.value)">
        <option value="a">Polyvinyl Chloride</option>
        <option value="b">Thermosetting</option>
        <option value="c">Thermoplastic</option>
    </select>
    <label for="select-choice-2" class="select">SABIC Product ID</label>
    <select name="select-choice-2" id="select-choice-2">
        <option value="A">1731-Black</option>
        <option value="B">1731-Brown</option>
        <option value="C">2345-Blue</option>
    </select>
       //js function
function selectTransport(value){
    if(value==="Thermoplastic")
    {

       var theText = "2345-Blue";
$("#select-choice-2 option:contains(" + theText + ")").attr('selected', 'selected');


    }}

不知怎的，第二个下拉列表没有被选择使用这个。如何使用jquery函数在选择第一个下拉列表值后自动选择第二个下拉列表中的值？

Answer 1

尝试

 $(function(){
   $('#select-choice-1').change(function(){
      var sel = $(this).val();
      $('#select-choice-2').val(sel.toUpperCase());
   });
 });

更新

<强> DEMO

function selectTransport(value){
//value return a,b,c
var val = $('#select-choice-1 [value="'+value+'"]').html();//.text()
  if(val==="Thermoplastic"){alert('test');
    var theText = "2345-Blue";
    $("#select-choice-2 option:contains(" + theText + ")").attr('selected', 'selected');
  }
}