如何以编程方式设置使用JavaScript的选择框元素的值？

263

我有以下的HTML元素<select>：如何以编程方式设置使用JavaScript的选择框元素的值？

<select id="leaveCode" name="leaveCode"> 
    <option value="10">Annual Leave</option> 
    <option value="11">Medical Leave</option> 
    <option value="14">Long Service</option> 
    <option value="17">Leave Without Pay</option> 
</select>

使用与leaveCode数为参数的JavaScript函数，我该如何在列表中选择相应的选项？

来源

2008-09-17 brasskazoo

看到我的答案对不同的方法 – Toskan 2012-08-10 15:53:08

看看这个性能的比较： http://javascriptstutorial.com/blog/selecting-dropdown-element-using-javascript-or-jquery – 2016-05-25 19:16:30

350

function SelectElement(valueToSelect) 
{  
    var element = document.getElementById('leaveCode'); 
    element.value = valueToSelect; 
}

来源

2008-09-17 01:31:38

+21

我知道它适用于IE，FF和Safari。它在哪里工作？ – 2008-09-17 05:57:19

好的答案，这比循环选项更容易。它符合标准：http://dev.w3.org/html5/spec/the-select-element.html#the-select-element。如果浏览器不兼容（当然有:)我很想知道它们是什么。这就是你通常依赖ppk的那种东西，但他固执地拒绝出现在我对这个话题的搜索中。 – philo 2012-05-22 17:47:53

@Milan也许跨浏览器的问题是* SelectToSelect *在选择选项中不存在，其中浏览器可能会有不同的行为（如1.不会更改当前值或2.set值为null或3.force值为无论如何，那是一个......）？我没有尝试自己，只是想知道。 – 2012-11-14 05:34:51

不回答这个问题，但你也可以通过索引，其中i是该项目的您要选择的指数选择：

var formObj = document.getElementById('myForm'); 
formObj.leaveCode[i].selected = true;

您还可以遍历项目选择由用循环显示值：

for (var i = 0, len < formObj.leaveCode.length; i < len; i++) 
    if (formObj.leaveCode[i].value == 'xxx') formObj.leaveCode[i].selected = true;

来源

2008-09-17 01:32:10

-5

我怕我不能在此刻测试，但在过去，我相信我只好给每个选项标签的ID，然后我做了什么如：

document.getElementById("optionID").select();

如果不工作，也许它会让你更接近解决方案：P

来源

2008-09-17 01:32:38

 

function foo(value) 
{ 
    var e = document.getElementById('leaveCode'); 
    if(e) e.value = value; 
}

来源

2008-09-17 01:32:56 mmattax

document.getElementById('leaveCode').value = '10';

这应该设置选择为 “年假”

来源

2008-09-17 01:34:00 William

应该沿着这些线：

function setValue(inVal){ 
var dl = document.getElementById('leaveCode'); 
var el =0; 
for (var i=0; i<dl.options.length; i++){ 
    if (dl.options[i].value == inVal){ 
    el=i; 
    break; 
    } 
} 
dl.selectedIndex = el; 
}

来源

2008-09-17 01:35:28

为什么不添加一个变量的元素' s Id并使其成为可重用的功能？

function SelectElement(selectElementId, valueToSelect) 
{  
    var element = document.getElementById(selectElementId); 
    element.value = valueToSelect; 
}

来源

2008-09-17 01:43:51

假设你的窗体被命名为Form1中：

function selectValue(val) 
{ 
    var lc = document.form1.leaveCode; 
    for (i=0; i&lt;lc.length; i++) 
    { 
    if (lc.options[i].value == val) 
    { 
     lc.selectedIndex = i; 
     return; 
    } 
    } 
}

来源

2008-09-17 03:03:01

function setSelectValue (id, val) { 
    document.getElementById(id).value = val; 
} 
setSelectValue('leaveCode', 14);

来源

2008-09-17 03:04:31

如果您正在使用jQuery，你也可以做到这一点

$("#leaveCode").val("14");

这将选择与选项值为14

来源

2010-12-23 15:00:15 einar

如果你需要最简单的方法：
1）点击一个按钮，它定义了选择选项
2）进入到另一个页面，选择选项
3）有其它页

上选择该选项的值1）按钮链接（比如主页）

<a onclick="location.href='contact.php?option=1';" style="cursor:pointer;">Sales</a> 
<a onclick="location.href='contact.php?option=2';" style="cursor:pointer;">IT</a>

（其中contact.php是选择相应的选项页面。请注意，页面url有？选项= 1或2）

2）将此代码放在您的第二页（我的案例contact。PHP）

<? 
if (isset($_GET['option']) && $_GET['option'] != "") { 
$pg = $_GET['option'];    
} ?>

3）使所选择的选项值，这取决于按钮点击

<select> 
<option value="Sales" <? if ($pg == '1') { echo "selected"; } ?> >Sales</option> 
<option value="IT" <? if ($pg == '2') { echo "selected"; } ?> >IT</option> 
</select>

..等等。
所以这是一个简单的方法，通过GET方式将值传递给另一个页面（带有选择列表）。没有表格，没有ID ..只有3个步骤，它的作品完美。

来源

2011-03-18 00:53:31 Lana

我比较了不同的方法：

Comparison of the different ways on how to set a value of a select with JS or jQuery

代码：在选择

$(function() { 
    var oldT = new Date().getTime(); 
    var element = document.getElementById('myId'); 
    element.value = 4; 
    console.error(new Date().getTime() - oldT); 


    oldT = new Date().getTime(); 
    $("#myId option").filter(function() { 
     return $(this).attr('value') == 4; 
    }).attr('selected', true); 
    console.error(new Date().getTime() - oldT); 


    oldT = new Date().getTime(); 
    $("#myId").val("4"); 
    console.error(new Date().getTime() - oldT); 


});

输出与〜4000个元素：

1毫秒

58毫秒

612毫秒

与Firefox 10注：我做这个测试的唯一原因，是因为jQuery用〜2000个条目进行超差的我们的名单上（他们有选项之间较长的文本）。我们一个VAL（）

注后有大约2秒的延迟，以及：这取决于实际值我设置值，而不是文本值

来源

2012-08-10 15:50:20 Toskan

-1

如果使用PHP，你可以尝试这样的事：

$value = '11'; 
$first = ''; 
$second = ''; 
$third = ''; 
$fourth = ''; 

switch($value) { 
      case '10' : 
       $first = 'selected'; 
      break; 
      case '11' : 
       $second = 'selected'; 
      break; 
      case '14' : 
       $third = 'selected'; 
      break; 
      case '17' : 
       $fourth = 'selected'; 
      break; 
     } 

echo' 
<select id="leaveCode" name="leaveCode"> 
    <option value="10" '. $first .'>Annual Leave</option> 
    <option value="11" '. $second .'>Medical Leave</option> 
    <option value="14" '. $third .'>Long Service</option> 
    <option value="17" '. $fourth .'>Leave Without Pay</option> 
</select>';

来源

2014-01-29 05:17:07 almyz125

我试图上述基于jQuery的JavaScript的/解决方案，例如：

$("#leaveCode").val("14");

和

var leaveCode = document.querySelector('#leaveCode'); 
leaveCode[i].selected = true;

在AngularJS应用

，那里有一个需要 <选择>元件。

它们都不起作用，因为AngularJS表单验证没有被触发。虽然选择了正确的选项（并在表单中显示），但输入仍然无效（ng-pristine和ng-invalid类仍然存在）。

要强制AngularJS验证，调用jQuery的change()选择一个选项后：

$("#leaveCode").val("14").change();

和

var leaveCode = document.querySelector('#leaveCode'); 
leaveCode[i].selected = true; 
$(leaveCode).change();

来源

2015-06-01 12:38:00 lumi77

有不同的方式来Select values of drop down using Javascript。

您很可能希望这样：

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

$('select').prop('selectedIndex', 3);

来源

2016-05-25 19:07:03

-1

使用jQuery：

$('leaveCode').prop('selectedIndex', 10);

来源

2017-05-31 04:08:07

如何以编程方式设置使用JavaScript的选择框元素的值？

回答

相关问题