logo标签列表

如何使用jQuery设置DropDownList的值？

jquerydrop-down-menu
383

如问题所述，如何使用jQuery设置DropDownList控件的值？

18个回答
0
设置下拉选项的选中值并更新更改
$("#PR2DistrictId option[value='@Model.PR2DistrictId']").attr("selected", true).trigger("chosen:updated")

这里我们首先从Model中设置值，然后将其更新到所选择的位置。

0

//下拉列表的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将所选项目更改为test2，请尝试以下方法。 // 设置下一个要选择的选项

var NewOprionValue = "Test2"

        var RemoveSelected = $("#MyDropDownList")[0].innerHTML.replace('selected', '');
        var ChangeSelected = RemoveSelected.replace(NewOption, NewOption + 'selected>');
        $('#MyDropDownList').html(ChangeSelected);
0

使用上面突出显示/选中的答案对我有用...这是一点见解。 我在获取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>
0
这是一个用于快速设置所选选项的函数：
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);
            }
        });
    }

使用元素ID和所选值作为参数调用此函数，例如：

SetSelected('selectID','some option');

当需要设置大量选择选项时，它非常有用。

0
//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())
})
0

对于使用Bootstrap的人，请使用$(#elementId').selectpicker('val','elementValue')而不是$('#elementId').val('elementValue')，因为后者不会更新UI中的值。

注意：即便是.change()函数也可以起作用，正如一些答案中所建议的，但它会触发$('#elementId').change(function(){//执行某些操作})函数。

我只是为那些将来参考这个线程的人发布这个信息。

这不起作用，因为selectpicker不是一个动作，刚刚测试过了。 userCms.php:595 未捕获的类型错误：$（...）.selectpicker不是一个函数。 - Khwaja Hussam Quasmi
0
通过提及值（例如：optionValue）来设置选项，并调用特定下拉列表（例如：drpDwnListId）的更改事件。
$("#drpDwnListId").val("optionValue").trigger("change");
0

如果您通过Ajax调用加载所有<options ....></options>
请按照以下步骤进行。

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)
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接