Java 根据第一个下拉框的选择设置第二个框的下拉值

我有两个下拉列表，声明如下：

    <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');


    }}

客户产品名称
聚氯乙烯
热固性
热塑性
SABIC产品ID
1731黑色
1731布朗
2345蓝色
//js函数
功能选择传输（值）{
如果（值==“热塑性”）
{
var theText=“2345蓝色”；
$（“#select-choice-2选项：包含（“+theText+”））.attr（'selected'，'selected'）；
}}

不知何故，第二个下拉列表没有使用此选项进行选择。在选择第一个下拉列表值后，如何使用jquery函数在第二个下拉列表中自动选择该值？

试试看

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

更新

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');
  }
}

在上述情况下，函数值应为a、b、c，而不是热塑性塑料

所以

---

通过使用jquery，您可以轻松完成任务，下面是代码：

    var ddlArray= new Array();
var ddl = document.getElementById('tierFormulaBase');
for (i = 0; i < ddl.options.length; i++) {
   ddlArray[i] = ddl .options[i].text;
}

$("#tierChangeType").change(function (e) {
    var e = document.getElementById("tierChangeType");
    var selectedValue = e.options[e.selectedIndex].value;
    var selectedText = e.options[e.selectedIndex].text;

    document.getElementById('tierFormulaBase').innerHTML = "";
    var src = document.getElementById('tierFormulaBase');
    var opt = document.createElement("option");
    if(selectedValue == 1)
    {
         opt.text = ddlArray[0];
        opt.value = selectedValue;
    }else if (selectedValue == 2)
    {
         opt.text = ddlArray[1];
        opt.value = selectedValue;
    }
    else if (selectedValue == 3)
    {
         opt.text = ddlArray[2];
        opt.value = selectedValue;
    }
    src.add(opt);
 });

var ddlArray=new Array（）；
var ddl=document.getElementById（'tierFormulaBase'）；
对于（i=0；i

---

有关实时演示和更多信息，请点击此链接：

两个选择都有相同的idI，我编辑了我的问题并添加了我正在尝试的内容，但它不起作用。嗨，布拉格尼斯，当我去查看列表时，你的代码会在第二个下拉列表中突出显示2345蓝色，但它不会在框中显示2345蓝色的值。是的，我确实在fiddle上看到了代码，它工作正常，但我在icenium上工作，并且下拉项目被选中而没有显示。那么我是否必须刷新下拉列表或有什么？@user2185012，请检查html或代码中可能存在一些错误/问题，如果我添加$（“#select-choice-2”）。selectmenu（“刷新”）；然后它反映了变化。非常感谢。

function selectTransport(value){
 if(value==="c")
 {
  ....
}

    var ddlArray= new Array();
var ddl = document.getElementById('tierFormulaBase');
for (i = 0; i < ddl.options.length; i++) {
   ddlArray[i] = ddl .options[i].text;
}

$("#tierChangeType").change(function (e) {
    var e = document.getElementById("tierChangeType");
    var selectedValue = e.options[e.selectedIndex].value;
    var selectedText = e.options[e.selectedIndex].text;

    document.getElementById('tierFormulaBase').innerHTML = "";
    var src = document.getElementById('tierFormulaBase');
    var opt = document.createElement("option");
    if(selectedValue == 1)
    {
         opt.text = ddlArray[0];
        opt.value = selectedValue;
    }else if (selectedValue == 2)
    {
         opt.text = ddlArray[1];
        opt.value = selectedValue;
    }
    else if (selectedValue == 3)
    {
         opt.text = ddlArray[2];
        opt.value = selectedValue;
    }
    src.add(opt);
 });