34

我有以下jquery函数：

$.post('GetSalesRepfromCustomer', {
    data: selectedObj.value
}, function (result) {
    alert(result[0]);
    $('select[name^="salesrep"]').val(result[0]);
});

result[0]是我想设置为selected我的选择框中的项目的值。 result[0]等于Bruce jones。

选择框由数据库查询填充，但呈现的 html 之一是：

<select id="salesrep" data-theme="a" data-mini="true" name="salesrep">
<option value=""> </option>
<option value="john smith">john smith</option>
<option value="Bruce Jones">Bruce Jones</option>
<option value="Adam Calitz">Adam Calitz</option>
<option>108</option>
</select>

$('select[name^="salesrep"]').val(result[0]);不填充选择框选定选项。我也试过$("#salesrep").val(result[0]);没有任何运气。

任何帮助表示赞赏。

所以我想要的是在salesrep 下拉列表中选择/突出显示的选项是Bruce Jones。

HTML 为：

<select id="salesrep" data-theme="a" data-mini="true" name="salesrep">
<option value=""> </option>
<option value="john smith">john smith</option>
<option value="Bruce Jones" selected >Bruce Jones</option>
<option value="Adam Calitz">Adam Calitz</option>
<option>108</option>
</select>

再次感谢，

整个脚本

<script type="text/javascript"> 
    $(document).ready(function () {

           $("#customer").autocomplete( 
     { 
     source: "get_customers", 
     messages: 
     { 
     noResults: '', 
     results: function() {} 
     }, 
     select: function( event, ui ) 
     { 
      var selectedObj = ui.item;        

     $.post('GetSalesRepfromCustomer', {data:selectedObj.value},function(result) { 
      alert(result[0]);
       var selnametest="Bruce Koller";
    $("#salesrep").val(selnametest);
     }); 

     } 
     });
         });


</script>

呈现的 HTML 是：

<select id="salesrep" data-theme="a" data-mini="true" name="salesrep">
<option value=""> </option>
<option value="RyanLubuschagne">Ryan Lubuschagne</option>
<option value="Bruce Jones">Bruce Jones</option>
<option value="Adam Calitz">Adam Calitz</option>
</select>
4

7 回答 7

56

尝试这个 ：

$('select[name^="salesrep"] option[value="Bruce Jones"]').attr("selected","selected");

只需替换option[value="Bruce Jones"]为option[value=result[0]]

在选择新选项之前，您可能需要“取消选择”前一个：

$('select[name^="salesrep"] option:selected').attr("selected",null);

您可能也想阅读这篇文章：jQuery get specific option tag text

编辑：使用 jQuery Mobile，此链接可能会提供一个很好的解决方案：jquery mobile - set select/option values

于 2013-07-25T11:36:24.977 回答
31

设置将其设置为下拉列表的选定选项的值：

$("#salesrep").val("Bruce Jones");

这是工作演示

如果它仍然无法正常工作：

  1. 请检查控制台上的 JavaScript 错误。
  2. 确保包含 jquery 文件
  3. 如果在外部使用，您的网络不会阻止 jquery 文件。
  4. 检查您的视图源一段时间，元素停止 jquery 的确切副本以正常工作
于 2013-07-25T11:21:26.443 回答
5

我认为没有人提到过的一件事，以及我过去犯过的一个愚蠢的错误（尤其是在动态填充选择时）。如果没有与提供的值匹配的值的选项，则 jQuery 的 .val() 将不适用于选择输入。

这是一个小提琴解释-> http://jsfiddle.net/go164zmt/

<select id="example">
    <option value="0">Test0</option>
    <option value="1">Test1</option>
</select>

$("#example").val("0");
alert($("#example").val());
$("#example").val("1");
alert($("#example").val());

//doesn't exist
$("#example").val("2");
//and thus returns null
alert($("#example").val());
于 2015-01-06T19:43:50.800 回答
5

您必须将 YourID 和 value="3" 替换为当前的。

$(document).ready(function() {
  $('#YourID option[value="3"]').attr("selected", "selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="YourID">
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
</select>

和 value="3" 为您当前的。

$('#YourID option[value="3"]').attr("selected", "selected");

<select id="YourID" >
<option value="1">A </option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
于 2015-07-17T03:25:58.503 回答
2 

$(document).ready(function() {
  $('#YourID option[value="3"]').attr("selected", "selected");
  $('#YourID option:selected').attr("selected",null);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="YourID">
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
</select>

于 2017-02-16T06:25:44.843 回答
0

.val()不喜欢通过文本设置，而是使用索引，所以你应该做一个find来获取它，然后由它设置。但即便如此，这也只是故事的一部分。您应该首先取消选择所有其他选项，并将所需选项的属性设置为selected使用您找到的索引。

我不会让值和文本相同，只是为了让你对你实际抓取的东西有一个积极的断言——价值与文本——所以你知道你在处理什么并且不会遇到这类问题。

顺便说一句，我讨厌这种$('#myId')语法，因为它在 SharePoint 中没有用，因为它会自动生成 GUID 并将它们放在 ID 之后，迫使你必须用 抓住它$('[id*=myID]')，并*表明它contains是那个值，所以这就是我将如何设置它up，除了我会省略，*因为在这种情况下它是不必要的。但是如果你想用$而不是*说starts with那个值，这个语法也非常有用，你可以用titleorname代替id，所以它的用途非常广泛，我希望更多的人使用它。

您还应该更正大小写问题，因为 JavaScript 区分大小写。

$(document).ready(function() {
    var yourText = "Bruce Jones";

    // Remove all 'selected' attributes from all options
    $('select[id="salesrep"] option').removeAttr('selected');

    // Get the index for the value you want to set
    var idx = $('select[id="salesrep"] option').filter(function() {
        return $(this).html() == yourText;
    }).val();

    // Set the dropdown value by index and set it as selected by text
    var salesrepBox = $('select[id="salesrep"]');
    salesrepBox.val(idx);
    salesrepBox.find('option[value="' + yourValue + '"]').attr('selected','selected'); // note that .val() doesn't do this
    salesrepBox.click(); // may be useful and necessary for certain engines to cache the value appropriately

    console.log(salesrepBox.html()); // should show you that the selected option is Bruce Jones
    console.log(salesrepBox.val());  // should give you the index 2

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="salesrep">
  <option value="1">John Smith</option>
  <option value="2">Bruce Jones</option>
  <option value="3">Adam Calitz</option>
</select>

对于 jQuery Mobile，您可能需要在影响下拉列表selected属性的行之后执行此操作，无论是删除它还是添加它：

salesrepBox.selectmenu("refresh", true);

或者.change();在上述命令的末尾执行 a，例如：

$('select[id="salesrep"] option').removeAttr('selected').change();
salesrepBox.find('option[value="' + yourValue + '"]').attr('selected','selected').change();
于 2021-11-05T17:42:39.023 回答
-1

.val('Bruce jones')和之间的匹配value="Bruce Jones"区分大小写。看起来您将琼斯大写在一个而不是另一个。要么追踪差异的来源，使用 id 代替名称，要么同时调用.toLowerCase()两者。

于 2017-12-11T09:58:51.537 回答