标签: html-select

如何使用JavaScript从下拉列表中获取所选值？

我尝试了下面的方法,但它们都返回选定的索引而不是值:

var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

我正在使用占位符进行文本输入,这很好.但我也想为我的选择框使用占位符.当然我可以使用这段代码:

<select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

但是"选择你的选项"是黑色而不是光线.所以我的解决方案可能是基于CSS的.jQuery也很好.

这只会使下拉列表中的选项变为灰色(因此点击箭头后):

option:first {
    color: #999;
}

编辑:问题是:人们如何在选择框中创建占位符？但它已经得到了回答,欢呼.

使用此选项会导致所选值始终为灰色(即使选择了实际选项后):

select {
    color: #999;
}

我认为"value"在<select>下面的元素上添加属性集会导致默认选择<option>包含my provided "value":

<select name="hall" id="hall" value="3">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

但是,这并没有像我预期的那样奏效.如何设置<option>默认选择的元素？

<select>使用jQuery从JavaScript对象添加选项的最佳方法是什么？

我正在寻找一些我不需要插件的东西,但我也会对那些插件感兴趣.

这就是我做的:

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

简洁明了的解决方案:

这是matdumsa的清理和简化版本:

$.each(selectValues, function(key, value) {
     $('#mySelect')
          .append($('<option>', { value : key })
          .text(value));
});

来自matdumsa的更改:(1)删除了append()中选项的close标记,(2)将属性/属性移动到map中作为append()的第二个参数.

使用核心jQuery,如何删除选择框的所有选项,然后添加一个选项并选择它？

我的选择框如下.

<Select id="mySelect" size="9"> </Select>

编辑:以下代码有助于链接.但是,(在Internet Explorer中).val('whatever')未选择已添加的选项.(我没有使用两个相同的"价值" .append和.val.)

$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');

编辑:试图让它模仿这个代码,每当页面/窗体重置时,我使用以下代码.此选择框由一组单选按钮填充..focus()更接近,但该选项似乎没有像它一样被选中.selected= "true".我现有的代码没有任何问题 - 我只是想学习jQuery.

var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";

编辑:选择的答案接近我需要的.这对我有用:

$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;

但这两个答案都让我得到了最后的解决方案..

我有一个select字段,里面有一些选项.现在我需要选择其中一个options使用jQuery.但是,我怎么能做到这一点时,我只知道value的option是一定要选择？

我有以下HTML:

<div class="id_100">
  <select>
    <option value="val1">Val 1</option>
    <option value="val2">Val 2</option>
    <option value="val3">Val 3</option>
  </select>
</div>

我需要选择有价值的选项val2.如何才能做到这一点？

这是一个演示页面:http: //jsfiddle.net/9Stxb/

我有一个包含已知值的下拉列表.我想要做的是将下拉列表设置为我知道使用jQuery存在的特定值.使用常规JavaScript,我会做类似的事情:

ddl = document.getElementById("ID of element goes here");
ddl.value = 2; // 2 being the value I want to set it too.

但是,我需要使用jQuery,因为我正在为我的选择器使用CSS类(愚蠢的ASP.NET客户端ID ...).

以下是我尝试过的一些事情:

$("._statusDDL").val(2); // Doesn't find 2 as a value.
$("._statusDDL").children("option").val(2) // Also failed.

我怎么能用jQuery做到这一点？

更新

事实证明,我第一次做对了:

$("._statusDDL").val(2);

当我在上方发出警报时,它工作正常,但当我删除警报并让它全速运行时,我收到错误

无法设置所选属性.索引无效

我不确定这是jQuery还是Internet Explorer 6的错误(我猜的是Internet Explorer 6),但它非常烦人.

我在其他帖子中已经阅读过它,但我无法理解.

我有一个阵列,

$scope.items = [
   {ID: '000001', Title: 'Chicago'},
   {ID: '000002', Title: 'New York'},
   {ID: '000003', Title: 'Washington'},
];

我想将其渲染为:

<select>
  <option value="000001">Chicago</option>
  <option value="000002">New York</option>
  <option value="000003">Washington</option>
</select>

而且我想选择ID = 000002的选项.

我已经阅读过选择并试过了,但我无法弄明白.

我想设置一个先前选择的选项,以便在页面加载时显示.我用以下代码尝试了它:

$("#gate").val('Gateway 2');

同

<select id="gate">
    <option value='null'>- choose -</option>
    <option value='gateway_1'>Gateway 1</option>
    <option value='gateway_2'>Gateway 2</option>
</select>

但这不起作用.有任何想法吗？

我搜索过谷歌,找不到任何相关内容.

我有这个代码.

<select ng-model="somethingHere" 
        ng-options="option.value as option.name for option in options"
></select>

有这样的一些数据

options = [{
   name: 'Something Cool',
   value: 'something-cool-value'
}, {
   name: 'Something Else',
   value: 'something-else-value'
}];

输出是这样的.

<select ng-model="somethingHere"  
        ng-options="option.value as option.name for option in options" 
        class="ng-pristine ng-valid">

    <option value="?" selected="selected"></option>
    <option value="0">Something Cool</option>
    <option value="1">Something Else</option>
</select>

如何将数据中的第一个选项设置为默认值,以便得到这样的结果.

<select ng-model="somethingHere" ....>
    <option value="0" selected="selected">Something Cool</option>
    <option value="1">Something Else</option>
</select>