Javascript 无法更改使用所选插件的html中的下拉选择

下面是我的webapp的html的一个片段。 我正试图根据.commtype的选择更改.commmethod的选定值，但所有常用技术都不适用于我

html代码段下面是我的jquery

<div class="form-group">
    <div class="col-sm-4">
    <select style="display: none;" class="combobox form-control chzn-done" id="commtype" name="CommunicationTypeId">
         <option value="-1">Select one...</option>
         <option value="401">Phone</option>
         <option value="403">Fax</option>
         <option value="404">Email</option>
         <option value="402">Postal</option>
    </select>
    <div style="width: 513px;" class="chzn-container chzn-container-single" id="commtype_chzn">
        <a href="javascript:void(0)" class="chzn-single" tabindex="-1">
          <span>Select one...</span>
        </a>
        <div class="chzn-drop" style="left: -9000px; width: 511px; top: 43px;">
         <ul class="chzn-results">
              <li id="commtype_chzn_o_0" class="active-result result-selected" style="">Select one...</li>
              <li id="commtype_chzn_o_1" class="active-result" style="">Phone</li>
              <li id="commtype_chzn_o_2" class="active-result" style="">Fax</li>
              <li id="commtype_chzn_o_3" class="active-result" style="">Email</li>
              <li id="commtype_chzn_o_4" class="active-result" style="">Postal</li>
         </ul>
        </div>
     </div>
</div>
<div class="form-group">
    <div class="col-sm-4">
    <select style="display: none;" class="combobox form-control chzn-done" id="commmethod" name="CommunicationMethodId">
        <option value="-1">Select one...</option>
        <option value="2">Slow</option>
        <option value="5">Fast</option>
        <option value="4">Fasted</option>
        <option value="1">Slowest</option>
        <option value="3">Slower</option>
    </select>
    <div style="width: 513px;" class="chzn-container chzn-container-single" id="commmethod_chzn">
      <a href="javascript:void(0)" class="chzn-single" tabindex="-1">
        <span>Select one...</span>
      </a>
      <div class="chzn-drop" style="left: -9000px; width: 511px; top: 43px;">
       <ul class="chzn-results">
           <li id="commmethod_chzn_o_0" class="active-result result-selected" style="">Select one...</li>
           <li id="commmethod_chzn_o_1" class="active-result" style="">Slow</li>
           <li id="commmethod_chzn_o_2" class="active-result" style="">Fast</li>
           <li id="commmethod_chzn_o_3" class="active-result" style="">Fasted</li>
           <li id="commmethod_chzn_o_4" class="active-result" style="">Slowest</li>
           <li id="commmethod_chzn_o_5" class="active-result" style="">Slower</li>
        </ul>
     </div>
 </div>

选择一个。。。
电话
传真
电子邮件
邮政的

选择一个
手机
传真
电子邮件
邮政

选择一个。。。
慢
快速的
禁食
最慢的
更慢的

选择一个
慢
快速
禁食
最慢的
更慢

Jquery代码，该代码设置commmethod的选定值，但是，在表单提交验证期间，它不会更改要处理的条目所需的其他值。（请参见jquery后面的代码段）

$（“#commtype”）.change（函数（）{
//我在这里得到了正确的选择值
var theselected=$（'#commtype>option:selected'）。text（）；
开关（已选择）{
案例“电话”：
$（“#commmethod”）.val（2）；
打破
案例“传真”：
$（“#commmethod”）.val（5）；
打破
案例“电子邮件”：
$（#commmethod'）.val（4）；
打破
“邮政”案：
$（'#commmethod'）.val（1）；
打破
违约：
$（'#commmethod'）.val（1）；
打破
}
$（“#commmethod”）.trigger（“李斯特：更新”）；
});

因此，如果我在开关后输出#commmethod.val，我会得到我想要的值，但是上面html中的以下元素（标记为--->）不会根据需要进行更新

<div style="width: 513px;" class="chzn-container chzn-container-single" id="commmethod_chzn">
    <a href="javascript:void(0)" class="chzn-single" tabindex="-1">
--->    <span>Select one...</span>
    </a>
    <div class="chzn-drop" style="left: -9000px; width: 511px; top: 43px;">
       <ul class="chzn-results">
           <li id="commmethod_chzn_o_0" class="active-result result-selected" style="">Select one...</li>
--->       <li id="commmethod_chzn_o_1" class="active-result" style="">Slow</li>
           <li id="commmethod_chzn_o_2" class="active-result" style="">Fast</li>
           <li id="commmethod_chzn_o_3" class="active-result" style="">Fasted</li>
           <li id="commmethod_chzn_o_4" class="active-result" style="">Slowest</li>
           <li id="commmethod_chzn_o_5" class="active-result" style="">Slower</li>
        </ul>
     </div>
 </div>

选择一个
--->
慢
快速
禁食
最慢的
更慢

如果我要使用commmethod的下拉列表对其进行选择，则上面的值将更新为该值，并且commmethod列表项selected的类将附加result selected

*****更新***** 结果表明，jquery选择的插件正在对事件进行更新。正在研究stackoverflow以正确更新下拉列表，但尚未找到解决方案

我感谢所有的帮助。谢谢。

做这个

<script type="text/javascript">
    $("#commtype").change(function () {
        //I do get the correct selected value here
        var theselected = $('#commtype >option:selected').text();

        switch (theselected) {
            case "Phone":
                $("#commdetail").val(2);
            case "Fax":
                $("#commdetail")val(1);
            case "Email":
                $('#commdetail').val(5);
            case "Postal":
                $('#commdetail').val(4);
            default:

        }
    });
</script>

$（“#commtype”）.change（函数（）{
//我在这里得到了正确的选择值
var theselected=$（'#commtype>option:selected'）。text（）；
开关（已选择）{
案例“电话”：
$（“#commdetail”）.val（2）；
案例“传真”：
$（“#commdetail”）val（1）；
案例“电子邮件”：
$（'#commdetail'）.val（5）；
“邮政”案：
$（'#commdetail'）.val（4）；
违约：
}
});

执行此操作

<script type="text/javascript">
    $("#commtype").change(function () {
        //I do get the correct selected value here
        var theselected = $('#commtype >option:selected').text();

        switch (theselected) {
            case "Phone":
                $("#commdetail").val(2);
            case "Fax":
                $("#commdetail")val(1);
            case "Email":
                $('#commdetail').val(5);
            case "Postal":
                $('#commdetail').val(4);
            default:

        }
    });
</script>

$（“#commtype”）.change（函数（）{
//我在这里得到了正确的选择值
var theselected=$（'#commtype>option:selected'）。text（）；
开关（已选择）{
案例“电话”：
$（“#commdetail”）.val（2）；
案例“传真”：
$（“#commdetail”）val（1）；
案例“电子邮件”：
$（'#commdetail'）.val（5）；
“邮政”案：
$（'#commdetail'）.val（4）；
违约：
}
});

我想您正在寻找以下内容

$("#commtype").change(function () {
    var theselected = $('option:selected', this).text();

    switch (theselected) {
        case "Phone":
            $("#commmethod").val(2);
        case "Fax":
            $("#commmethod").val(5);
        case "Email":
            $("#commmethod").val(4);
        case "Postal":
            $("#commmethod").val(1);
        default:
            $("#commmethod").val(-1);
    }

    $("#commmethod").trigger("liszt:updated"); //to update chosen select
});

---

我想你正在寻找类似以下的东西

$("#commtype").change(function () {
    var theselected = $('option:selected', this).text();

    switch (theselected) {
        case "Phone":
            $("#commmethod").val(2);
        case "Fax":
            $("#commmethod").val(5);
        case "Email":
            $("#commmethod").val(4);
        case "Postal":
            $("#commmethod").val(1);
        default:
            $("#commmethod").val(-1);
    }

    $("#commmethod").trigger("liszt:updated"); //to update chosen select
});

---

尝试使用开发人员工具获取值

    $('#commmethod').val();

应返回预期值，但该值未在页面上正确显示。如果控件刷新不正确，通常会出现这种情况

设置该值后，请尝试添加该值

    $("#commmethod").val('whatever').trigger("liszt:updated");
    $("#commmethodSimple").val('whatever').trigger('change');
    $.uniform.update();

---

尝试使用开发人员工具获取值

    $('#commmethod').val();

应返回预期值，但该值未在页面上正确显示。如果控件刷新不正确，通常会出现这种情况

设置该值后，请尝试添加该值

    $("#commmethod").val('whatever').trigger("liszt:updated");
    $("#commmethodSimple").val('whatever').trigger('change');
    $.uniform.update();

在所有的建议（谢谢大家）和进一步的stackoverflow研究之后，我找到了一个解决我特定问题的方法

尽管下面的代码段没有更新下拉列表的选择选项，但它不需要更新。它更新所选的值，然后在表单提交时进行验证和保存

新jquery

$("#commtype").change(function () {

    var theselected = $('#commtype >option:selected').text();

    switch (theselected) {
        case "Phone":
            $('#commmethod').val(2);
            break;
        case "Fax":
            $('#commmethod').val(5);
            break;
        case "Email":
            $('#commmethod').val(4);
            break;
        case "Postal":
            $('#commmethod').val(1);
            break;
        default:
            $('#commmethod').val(-1);
            break;
    }

    $('#commmethod').chosen().change();
    $("#commmethod").trigger("liszt:updated");
 });

在所有的建议（谢谢大家）和进一步的stackoverflow研究之后，我找到了一个解决我特定问题的方法

尽管下面的代码段不会更新下拉列表的选择选项