Jquery changing Selected value in MVC dropdown

StackOverflow https://stackoverflow.com/questions/16065298

Question

I have been searching the internet and reading a lot of different ways to do this, but for some reason, none of them are working for me. There must be something I am missing here. What I am trying to do is update a dropdown list with a particular selected value when a checkbox is checked.

Html for select

    <select data-hands-jqui-props="{&quot;header&quot;:true,&quot;height&quot;:175,&quot;minWidth&quot;:225,&quot;classes&quot;:&quot;&quot;,&quot;checkAllText&quot;:&quot;Check all&quot;,&quot;uncheckAllText&quot;:&quot;Uncheck all&quot;,&quot;noneSelectedText&quot;:&quot;Select option&quot;,&quot;selectedText&quot;:&quot;# selected&quot;,&quot;selectedList&quot;:1,&quot;autoOpen&quot;:false,&quot;multiple&quot;:false,&quot;disabled&quot;:false,&quot;handsOnCreate&quot;:null}" data-hands-jqui-type="multiselect" data-val="true" data-val-date="The field  must be a date." id="SundayOpen" name="SundayOpen"><option value=""></option>
<option value="4/17/2013 12:00:00 AM">12:00 AM</option>
<option value="4/17/2013 12:15:00 AM">12:15 AM</option>
<option value="4/17/2013 12:30:00 AM">12:30 AM</option>
<option value="4/17/2013 12:45:00 AM">12:45 AM</option>
<option value="4/17/2013 1:00:00 AM">1:00 AM</option>
<option value="4/17/2013 1:15:00 AM">1:15 AM</option>
<option value="4/17/2013 1:30:00 AM">1:30 AM</option>
<option value="4/17/2013 1:45:00 AM">1:45 AM</option>
<option value="4/17/2013 2:00:00 AM">2:00 AM</option>
<option value="4/17/2013 2:15:00 AM">2:15 AM</option>
<option value="4/17/2013 2:30:00 AM">2:30 AM</option>
<option value="4/17/2013 2:45:00 AM">2:45 AM</option>
<option value="4/17/2013 3:00:00 AM">3:00 AM</option>
<option value="4/17/2013 3:15:00 AM">3:15 AM</option>
<option value="4/17/2013 3:30:00 AM">3:30 AM</option>
<option value="4/17/2013 3:45:00 AM">3:45 AM</option>
<option value="4/17/2013 4:00:00 AM">4:00 AM</option>
<option value="4/17/2013 4:15:00 AM">4:15 AM</option>
<option value="4/17/2013 4:30:00 AM">4:30 AM</option>
<option value="4/17/2013 4:45:00 AM">4:45 AM</option>
<option value="4/17/2013 5:00:00 AM">5:00 AM</option>
<option value="4/17/2013 5:15:00 AM">5:15 AM</option>
<option value="4/17/2013 5:30:00 AM">5:30 AM</option>
<option value="4/17/2013 5:45:00 AM">5:45 AM</option>
<option value="4/17/2013 6:00:00 AM">6:00 AM</option>
<option value="4/17/2013 6:15:00 AM">6:15 AM</option>
<option value="4/17/2013 6:30:00 AM">6:30 AM</option>
<option value="4/17/2013 6:45:00 AM">6:45 AM</option>
<option value="4/17/2013 7:00:00 AM">7:00 AM</option>
<option value="4/17/2013 7:15:00 AM">7:15 AM</option>
<option value="4/17/2013 7:30:00 AM">7:30 AM</option>
<option value="4/17/2013 7:45:00 AM">7:45 AM</option>
<option value="4/17/2013 8:00:00 AM">8:00 AM</option>
<option value="4/17/2013 8:15:00 AM">8:15 AM</option>
<option value="4/17/2013 8:30:00 AM">8:30 AM</option>
<option value="4/17/2013 8:45:00 AM">8:45 AM</option>
<option value="4/17/2013 9:00:00 AM">9:00 AM</option>
<option value="4/17/2013 9:15:00 AM">9:15 AM</option>
<option value="4/17/2013 9:30:00 AM">9:30 AM</option>
<option value="4/17/2013 9:45:00 AM">9:45 AM</option>
<option value="4/17/2013 10:00:00 AM">10:00 AM</option>
<option value="4/17/2013 10:15:00 AM">10:15 AM</option>
<option value="4/17/2013 10:30:00 AM">10:30 AM</option>
<option value="4/17/2013 10:45:00 AM">10:45 AM</option>
<option value="4/17/2013 11:00:00 AM">11:00 AM</option>
<option value="4/17/2013 11:15:00 AM">11:15 AM</option>
<option value="4/17/2013 11:30:00 AM">11:30 AM</option>
<option value="4/17/2013 11:45:00 AM">11:45 AM</option>
<option value="4/17/2013 12:00:00 PM">12:00 PM</option>
<option value="4/17/2013 12:15:00 PM">12:15 PM</option>
<option value="4/17/2013 12:30:00 PM">12:30 PM</option>
<option value="4/17/2013 12:45:00 PM">12:45 PM</option>
<option value="4/17/2013 1:00:00 PM">1:00 PM</option>
<option value="4/17/2013 1:15:00 PM">1:15 PM</option>
<option value="4/17/2013 1:30:00 PM">1:30 PM</option>
<option value="4/17/2013 1:45:00 PM">1:45 PM</option>
<option value="4/17/2013 2:00:00 PM">2:00 PM</option>
<option value="4/17/2013 2:15:00 PM">2:15 PM</option>
<option value="4/17/2013 2:30:00 PM">2:30 PM</option>
<option value="4/17/2013 2:45:00 PM">2:45 PM</option>
<option value="4/17/2013 3:00:00 PM">3:00 PM</option>
<option value="4/17/2013 3:15:00 PM">3:15 PM</option>
<option value="4/17/2013 3:30:00 PM">3:30 PM</option>
<option value="4/17/2013 3:45:00 PM">3:45 PM</option>
<option value="4/17/2013 4:00:00 PM">4:00 PM</option>
<option value="4/17/2013 4:15:00 PM">4:15 PM</option>
<option value="4/17/2013 4:30:00 PM">4:30 PM</option>
<option value="4/17/2013 4:45:00 PM">4:45 PM</option>
<option value="4/17/2013 5:00:00 PM">5:00 PM</option>
<option value="4/17/2013 5:15:00 PM">5:15 PM</option>
<option value="4/17/2013 5:30:00 PM">5:30 PM</option>
<option value="4/17/2013 5:45:00 PM">5:45 PM</option>
<option value="4/17/2013 6:00:00 PM">6:00 PM</option>
<option value="4/17/2013 6:15:00 PM">6:15 PM</option>
<option value="4/17/2013 6:30:00 PM">6:30 PM</option>
<option value="4/17/2013 6:45:00 PM">6:45 PM</option>
<option value="4/17/2013 7:00:00 PM">7:00 PM</option>
<option value="4/17/2013 7:15:00 PM">7:15 PM</option>
<option value="4/17/2013 7:30:00 PM">7:30 PM</option>
<option value="4/17/2013 7:45:00 PM">7:45 PM</option>
<option value="4/17/2013 8:00:00 PM">8:00 PM</option>
<option value="4/17/2013 8:15:00 PM">8:15 PM</option>
<option value="4/17/2013 8:30:00 PM">8:30 PM</option>
<option value="4/17/2013 8:45:00 PM">8:45 PM</option>
<option value="4/17/2013 9:00:00 PM">9:00 PM</option>
<option value="4/17/2013 9:15:00 PM">9:15 PM</option>
<option value="4/17/2013 9:30:00 PM">9:30 PM</option>
<option value="4/17/2013 9:45:00 PM">9:45 PM</option>
<option value="4/17/2013 10:00:00 PM">10:00 PM</option>
<option value="4/17/2013 10:15:00 PM">10:15 PM</option>
<option value="4/17/2013 10:30:00 PM">10:30 PM</option>
<option value="4/17/2013 10:45:00 PM">10:45 PM</option>
<option value="4/17/2013 11:00:00 PM">11:00 PM</option>
<option value="4/17/2013 11:15:00 PM">11:15 PM</option>
<option value="4/17/2013 11:30:00 PM">11:30 PM</option>
<option value="4/17/2013 11:45:00 PM">11:45 PM</option>
</select>

The JQuery

  if (IsPreFillOn) {

        $("#SundayOpen option[value='4/17/2013 12:30:00 AM']").attr("selected","selected");
        alert($("#SundayOpen").val());
    }

The document.ready is not shown but is there. The interesting thing is that the alert shows the proper value, but the actual drop down is not being updated.

Any thoughts on what could be going on?

Was it helpful?

Solution 3

Thank you very much for the info. it turned out we were using a widget tool that I didn't realize was hiding / making more levels called Multiselect. if anyone gets here and has this same issue and same widget... here was the answer:

 $("#SundayOpen").multiselect("widget").find("input[value='4/17/2013 12:00:00 AM']").each(function () {
            this.click();
        });

OTHER TIPS

I show it as working: http://jsfiddle.net/KazeT/1/

You should, however, be using .prop, not .attr for setting the attribute.

 $("#SundayOpen option[value='4/17/2013 12:30:00 AM']").prop("selected","selected");
 alert($("#SundayOpen").val());`enter code here`

But honestly, it would be much easier for you simply to do this:

$("#SundayOpen").val("4/17/2013 12:30:00 AM")

Try this:- http://jsfiddle.net/5psSy/

$("#SundayOpen").val("4/17/2013 12:15:00 AM");
alert($("#SundayOpen").val());
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top