正如问题所说,我如何使用jQuery设置下拉列表控件的值?
如果你使用索引,你可以直接用.attr()设置所选索引:
$("#mydropdownlist").attr('selectedIndex', 0);
这将把它设置为下拉列表中的第一个值。
编辑: 我上面的方法过去很管用。但现在似乎不再是了。
但正如韩寒在评论中愉快地指出的那样,正确的做法是:
$("#mydropdownlist").get(0).selectedIndex = index_here;
试试这个非常简单的方法:
/*make sure that value is included in the options value of the dropdownlist
e.g.
(<select><option value='CA'>California</option><option value='AK'>Alaska</option> </select>)
*/
$('#mycontrolId').val(myvalue).attr("selected", "selected");
如果你的下拉菜单是Asp。净下拉,然后下面的代码将工作正常,
$("#<%=DropDownName.ClientID%>")[0].selectedIndex=0;
但如果你的下拉是HTML下拉,那么这段代码将工作。
$("#DropDownName")[0].selectedIndex=0;
我认为这可能会有所帮助:
$.getJSON('<%= Url.Action("GetDepartment") %>',
{ coDepartment: paramDepartment },
function(data) {
$(".autoCompleteDepartment").empty();
$(".autoCompleteDepartment").append($("<option />").val(-1));
$.each(data, function() {
$(".autoCompleteDepartment").append($("<option />").val(this.CodDepartment).text(this.DepartmentName));
});
$(".autoCompleteDepartment").val(-1);
}
);
如果您这样做,您将添加一个没有文本的元素。因此,当你点击de combo时,它不会出现,但值-1你添加了一个稍后选择$(".autoCompleteDepartment").val(-1);允许您控制组合是否具有有效值。
希望能对大家有所帮助。
对不起,我的英语不好。
如果你加载所有<options ....></options>通过Ajax调用 按照下面的步骤来做。
1).创建一个单独的下拉值设置方法 为例:
function set_ip_base_country(countryCode)
$('#country').val(countryCode)
}
2).当ajax调用成功所有html追加任务完成时调用此方法
为例:
success: function (doc) {
.....
.....
$("#country").append('<option style="color:black;" value="' + key + '">' + value + '</option>')
set_ip_base_country(ip_base_country)
}
下面是一个快速设置所选选项的函数:
function SetSelected(elem, val){
$('#'+elem+' option').each(function(i,d){
// console.log('searching match for '+ elem + ' ' + d.value + ' equal to '+ val);
if($.trim(d.value).toLowerCase() == $.trim(val).toLowerCase()){
// console.log('found match for '+ elem + ' ' + d.value);
$('#'+elem).prop('selectedIndex', i);
}
});
}
使用参数element id和所选值调用此函数;是这样的:
SetSelected('selectID','some option');
当有很多选择选项需要设置时,它很有用。
正如@Nick Berardi所建议的,如果你更改的值没有反映在UI前端,尝试:
$("#mydropdownlist").val("thevalue").change();
有很多方法可以做到这一点。以下是其中一些:
$("._statusDDL").val('2');
OR
$('select').prop('selectedIndex', 3);
设置下拉选择的值并更新更改
$("#PR2DistrictId option[value='@Model.PR2DistrictId']").attr("selected", true).trigger("chosen:updated")
这里我们首先从Model中设置值,然后在选中时更新它
//Html下拉列表的格式。
<select id="MyDropDownList">
<option value=test1 selected>test1</option>
<option value=test2>test2</option>
<option value=test3>test3</option>
<option value=test4>test4</option>
//如果你想使用javascript将选中的Item更改为test2。试试这个。 //设置你想要选择的下一个选项
var NewOprionValue = "Test2"
var RemoveSelected = $("#MyDropDownList")[0].innerHTML.replace('selected', '');
var ChangeSelected = RemoveSelected.replace(NewOption, NewOption + 'selected>');
$('#MyDropDownList').html(ChangeSelected);
这个问题的最佳答案是:
$("#comboboxid").val(yourvalue).trigger("chosen:updated");
e.g:
$("#CityID").val(20).trigger("chosen:updated");
or
$("#CityID").val("chicago").trigger("chosen:updated");
使用上面突出显示的/选中的答案对我有用……这里有一个小见解。 我在获取URL上作弊了一点,但基本上我是在Javascript中定义URL,然后通过jquery回答上面的设置:
<select id="select" onChange="window.location.href=this.value">
<option value="">Select a task </option>
<option value="http://127.0.0.1:5000/choose_form/1">Task 1</option>
<option value="http://127.0.0.1:5000/choose_form/2">Task 2</option>
<option value="http://127.0.0.1:5000/choose_form/3">Task 3</option>
<option value="http://127.0.0.1:5000/choose_form/4">Task 4</option>
<option value="http://127.0.0.1:5000/choose_form/5">Task 5</option>
<option value="http://127.0.0.1:5000/choose_form/6">Task 6</option>
<option value="http://127.0.0.1:5000/choose_form/7">Task 7</option>
<option value="http://127.0.0.1:5000/choose_form/8">Task 8</option>
</select>
<script>
var pathArray = window.location.pathname.split( '/' );
var selectedItem = "http://127.0.0.1:5000/" + pathArray[1] + "/" + pathArray[2];
var trimmedItem = selectedItem.trim();
$("#select").val(trimmedItem);
</script>
如果你只需要设置一个下拉列表的值,那么最好的方法是
$("#ID").val("2");
如果你必须在更新下拉列表值后触发任何脚本,比如如果你在下拉列表上设置任何onChange事件,并且你想在更新下拉列表后运行这个,那么你需要像这样使用
$("#ID").val("2").change();
对于使用Bootstrap的人,使用$(#elementId').selectpicker('val','elementValue')而不是$('#elementId').val('elementValue'),因为后者不会更新UI中的值。
注意:即使.change()函数也可以工作,正如上面在一些回答中所建议的那样,但它会触发$('#elementId').change(function(){//do something})函数。
只是把这个贴出来,以便将来有人引用这个帖子。
//customerDB is an Array
for(i of customerDB){
//create option and add to drop down list
var set = `<option value=${i.id}>${i.id}</option>`;
$('#dropDown').append(set);
}
// print dropdown values on console
$('#dropDown').click(function(){
console.log($(this).val())
})
推荐文章
- 如何获得一个键/值JavaScript对象的键
- 什么时候JavaScript是同步的?
- 在jQuery中取消<select>的最佳方法?
- jQuery的“输入”事件
- 错误"Uncaught SyntaxError:意外的标记与JSON.parse"
- 给一个数字加上st, nd, rd和th(序数)后缀
- 在jQuery中的CSS类更改上触发事件
- jQuery日期/时间选择器
- 我如何预填充一个jQuery Datepicker文本框与今天的日期?
- jQuery添加必要的输入字段
- JavaScript错误(Uncaught SyntaxError:意外的输入结束)
- navigator。gelocation。getcurrentposition有时有效有时无效
- 我如何使用jQuery按字母顺序排序一个列表?
- 如何在jQuery检索复选框值
- 停止缓存jQuery .load响应