Jquery在MVC下拉列表中更改选定值

时间:2013-04-17 16:25:01

标签: javascript jquery asp.net-mvc html.dropdownlistfor selectedvalue

我一直在网上搜索并阅读了很多不同的方法来做这件事,但由于某种原因,他们都没有为我工作。我必须在这里找到一些东西。我想要做的是在选中复选框时更新具有特定选定值的下拉列表。

选择

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

JQuery

  if (IsPreFillOn) {

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

document.ready没有显示但是在那里。有趣的是警报显示正确的值,但实际的下拉列表没有更新。

有关可能发生的事情的任何想法?

3 个答案:

答案 0 :(得分:4)

我表明它有效: http://jsfiddle.net/KazeT/1/

但是,你应该使用.prop,而不是.attr来设置属性。

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

但老实说,你只是这样做会容易得多:

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

答案 1 :(得分:1)

试试这个: - http://jsfiddle.net/5psSy/

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

答案 2 :(得分:0)

非常感谢您提供的信息。事实证明我们使用的是一个小工具,我没有意识到隐藏/制作更多级别称为Multiselect。如果有人到这里并有同样的问题和相同的小部件......这里是答案:

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