16赞

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

作者：LEEstarmmmmm | 2023-09-05 14:48

如何解决《如何使用JavaScript以编程方式设置选择框元素的值？》经验，为你挑选了7个好方法。

我有以下HTML

使用带有leaveCode数字作为参数的JavaScript函数,如何在列表中选择适当的选项？



1> Mitchel Sell..：
selectElement('leaveCode', '11')

function selectElement(id, valueToSelect) {    
    let element = document.getElementById(id);
    element.value = valueToSelect;
}

        
我知道它适用于IE,FF和Safari.哪里不起作用？ 
那么多选呢？这似乎不适用于多个选项(至少在Chrome 25中). 
很好的答案,这比循环选项更容易.它符合标准:http://dev.w3.org/html5/spec/the-select-element.html#the-select-element.如果有浏览器不兼容(当然有:)我会非常有兴趣知道它们是什么.这就是你通常依靠ppk的那种东西,但他顽固地拒绝出现在我对这个话题的搜索中. 
较早版本的IE.但现在没关系,它是2012年. 
正如@ ring0指出的那样,当valueToSelect不存在时,它会在chrome中插入一个空白条目.而IE和Firefox保留最后选择的值. 

2> Einar Ólafss..：
如果你使用的是jQuery,你也可以这样做

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


这将选择值为14的选项

编辑:

使用普通的Javascript,这也可以通过两种Document方法实现

使用querySelector,您可以选择基于CSS选择器的元素

document.querySelector('#leaveCode').value = '14'


或者更成熟的方法,使用getDocumentById,就像函数的名称所暗示的那样,让你选择一个基于那里的元素

document.getElementById('leaveCode').value = '14'


您可以运行剪切的波纹管代码来查看这些方法和jQuery函数.



const jQueryFunction = () => {
  
  $('#leaveCode').val('14'); 
  
}

const querySelectorFunction = () => {
  
  document.querySelector('#leaveCode').value = '14' 
  
}

const getElementByIdFunction = () => {
  
  document.getElementById('leaveCode').value='14' 
  
}

input {
  display:block;
  margin: 10px;
  padding: 10px
}










3> Andrew Hedge..：
function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);

        

4> Chase Seiber..：
没有回答问题,但您也可以通过索引进行选择,其中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;

        
不应该formObj.leaveCode [i] .selected = true; 是formObj.options [i] .selected = true; ？ 

5> Toskan..：
我比较了不同的方法:

比较如何使用JS或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秒的延迟

另请注意:我根据实际值而不是文本值设置值

        
我们案例中的自动完成是建立在选择列表之上的.优点是您不必编程任何东西,只需重复使用即可.如果选择很重要或经常使用,那么具有完全ajax支持的自动完成可能就是您想要的.但由于所有选择列表都不是这样,我确信有一些更重要的改进;-) 

6> William..：
document.getElementById('leaveCode').value = '10';


这应该将选择设置为"年假"

        

7> lumi77..：
我尝试了上面基于JavaScript/jQuery的解决方案,例如: 

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


和

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


在AngularJS应用程序中,有一个必需的 吐个槽吧,看都看了


            
                
                                        会员登录 | 用户注册