Cannot change dropdown selection in html that is using chosen plugin

Question

Here is a snippet of my webapp's html. I am trying to change the selected value of the .commmethod based upon the selection of .commtype, but all the usual techniques do not work for me.

Below the html snippet is my 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 code which does set the selected value of commmethod, however, it does not change the other values needed for the entries to be processes during validation on form submit. (see snippet after jquery)

<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":
                $("#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").trigger("liszt:updated");
    });
</script>

So, if I output the #commmethod.val after the switch I get the value I want, but the following elements(marked with --->) in html above do not get updated as needed...

<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>

If I would make a selection on the commmethod using its dropdown, the above gets updated to that value and the class of the commmethod list item selected gets appended with result-selected.

*****Update***** Turns out the jquery chosen plugin is making the updates on an event. Researching stackoverflow to properly update dropdown, have not found a solution yet.

I appreciate any and all help. Thank you.

Answer 1

After all the suggestions(thank you all) and further stackoverflow research, I found a solution to my particular issue.

Although the snippet below does not update the dropdown's select option, it doesn't need to. It updates the chosen values which are then validated and saved upon form submit.

new 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");
 });

Answer 2

Try using the Developer tools to get the value.

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

Should return the expected value but value is not displaying correctly on the page. This is usually if the control is not refreshed correctly.

After setting the value, try adding this also

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

Answer 3

I think you are looking for something like following.

$("#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
});

Answer 4

Do this

<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>