如何使用 jQuery、JavaScript 和 HTML 动态设置下拉列表的选定选项？

Question

出于某种原因，我无法让它发挥作用。

我的选项列表是使用这些脚本动态填充的：

function addOption(selectId, value, text, selected) {
    var html = '<option value="'+value+'">'+text+'</option>';
    if (selected == "on") {
        html = '<option value="'+value+'" selected="selected">'+text+'</option>';
    }
    $('#'+selectId).append(html);
}

function addSalespersonOption(id, name, defsales) {
    addOption('salesperson', id, name, defsales);
}

这是 HTML：

<td class="text-r"><label for="salesperson">Salesperson:</label></td>
<td>
    <select id="salesperson">
        <option value="">(select)</option>
    </select>
</td>

到目前为止，输出是：

<option value="1266852143634" selected="selected">Eric Hunt</option>

DOM 显示了这一点：

index              2
disabled           false
value              "1266852143634"
text               "Eric Hunt"
selected           false
defaultSelected    true

但出于某种原因，当页面加载时，下拉列表不会将 Eric Hunt 显示为预选。 也不是任何事情。

如何获得“selected true”而不是“defaultSelected true”？

编辑：事实证明，由于deceze和rosscj2533来自下面的答案的帮助，上面的代码运行良好。 它对我不起作用的唯一原因是，我发现 Ruby 代码覆盖了 select 元素。

感谢大家在这方面的帮助，

干杯

Answer 1

defaultSelected属性不可设置，仅供参考：

报价：

defaultSelected 属性返回所选属性的默认值。
如果默认选择了一个选项，则此属性返回 true，否则返回 false。

我想你想要：

$('option[value=valueToSelect]', newOption).attr('selected', 'selected');

即设置要选择的option的selected属性。

在不尝试修复您的代码的情况下，这大致是我的做法：

function buildSelect(options, default) {
    // assume options = { value1 : 'Name 1', value2 : 'Name 2', ... }
    //        default = 'value1'

    var $select = $('<select></select>');
    var $option;

    for (var val in options) {
        $option = $('<option value="' + val + '">' + options[val] + '</option>');
        if (val == default) {
            $option.attr('selected', 'selected');
        }
        $select.append($option);
    }

    return $select;
}

您似乎已经有很多包袱和依赖项，我无法告诉您如何最好地将所选选项集成到您的代码中而不看到更多，但希望这会有所帮助。

Answer 2

脚本

 <script type="text/javascript">
    $(function(){
        $("#gender").val("Male").attr("selected","selected");
    });
 </script>

HTML

<select id="gender" selected="selected">
    <option>--Select--</option>
    <option value="1">Male</option>
    <option value="2">Female</option>
</select>

点击这里更多详情

Answer 3

这是您可以在 javascript 中更改<select>元素的选定选项的另一种方法。 您可以使用

document.getElementById('salesperson').selectedIndex=1;

将其设置为 1 将使下拉列表的第二个元素被选中。 选择元素索引从 0 开始。

这是一个示例代码。 检查您是否可以使用这种方法：

<html>
<head>
<script language="javascript">

function changeSelected() { 
document.getElementById('salesperson').selectedIndex=1;

} 

</script>
</head>
<body>
<form name="f1">

<select id="salesperson" > 
   <option value"">james</option>
   <option value"">john</option>  
</select> 
<input type="button" value="Change Selected" onClick="changeSelected();">

</form>
</body>
</html>

Answer 4

你的代码对我有用。 addSalespersonOption什么时候被调用？ 那个调用可能有问题。

还有一些 html 有点偏离（可能是复制/粘贴问题？），但这似乎没有引起任何问题。 您的选择应如下所示：

<select id="salesperson"> 
    <option value="">(select)</option> 
</select>

而不是这个：

<select id="salesperson" /> 
    <option value"">(select)</option> 
</select>

编辑：您的选项列表何时动态填充？ 您确定要在调用addSalespersonOption为defSales值传递'on'吗？ 尝试将该代码更改为：

if (selected == "on") { 
    alert('setting default selected option to ' + text);
    html = '<option value="'+value+'" selected="selected">'+text+'</option>'; 
}

并查看警报是否发生以及如果发生警报会说明什么。

编辑：我的测试的工作示例（错误：未定义来自 jsbin，而不是我的代码）。

Answer 5

请原谅我的无知，但是为什么在处理 ID 时使用$('.salesperson')而不是$('#salesperson') ？

Answer 6

就到这里了。

 // Select by value $('select[name="options"]').find('option[value="3"]').attr("selected",true); // Select by text //$('select[name="options"]').find('option:contains("Third")').attr("selected",true);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <html> <body> <select name="options"> <option value="1">First</option> <option value="2">Second</option> <option value="3">Third</option> </select> </body> </html>

Answer 7

你的语法是错误的。

您需要使用两个参数调用attr ，如下所示：

$('.salesperson', newOption).attr('defaultSelected', "selected");

您当前的代码将值"selected"分配给变量defaultSelected ，然后将该值传递给attr函数，该函数将返回selected属性的值。

Answer 8

如果您想在服务器端选择该选项，您可以执行以下操作：

<select name="catigory">
  {{$catig := .product.Catigory}}
  <option value="computers"{{if eq $catig "computers"}} selected {{end}}>computers</option>
  <option value="mobiles"  {{if eq $catig "mobiles"}} selected {{end}}>mobiles</option>          
  <option value="motors"   {{if eq $catig "motors"}} selected {{end}}>motors</option>       
  <option value="animals"  {{if eq $catig "animals"}} selected {{end}}>animals</option>                                                  
  <option value="cars"     {{if eq $catig "cars"}} selected {{end}}>cars</option>                                                        
  <option value="services" {{if eq $catig "services"}} selected {{end}}>services</option>                                                
  <option value="others"   {{if eq $catig "others"}} selected {{end}}>others</option>            
</select>

这个表达是golang寺特有的。 您可以将其转换为您希望的任何模板引擎。

如何使用 jQuery、JavaScript 和 HTML 动态设置下拉列表的选定选项？

问题描述

8 个解决方案

解决方案1
22 已采纳 2010-02-23 03:47:45

解决方案2
7

解决方案3
2 2010-02-23 05:20:16

解决方案4
2 2010-02-24 14:43:16

解决方案5
1 2010-02-23 05:32:36

解决方案6
1

解决方案7
0 2010-02-23 03:18:06

解决方案8
0

如何使用 jQuery、JavaScript 和 HTML 动态设置下拉列表的选定选项？

问题描述

8 个解决方案

解决方案1 22 已采纳 2010-02-23 03:47:45

解决方案2 7

解决方案3 2 2010-02-23 05:20:16

解决方案4 2 2010-02-24 14:43:16

解决方案5 1 2010-02-23 05:32:36

解决方案6 1

解决方案7 0 2010-02-23 03:18:06

解决方案8 0

解决方案1
22 已采纳 2010-02-23 03:47:45

解决方案2
7

解决方案3
2 2010-02-23 05:20:16

解决方案4
2 2010-02-24 14:43:16

解决方案5
1 2010-02-23 05:32:36

解决方案6
1

解决方案7
0 2010-02-23 03:18:06

解决方案8
0