HTML SELECT-使用JavaScript将值更改为VALUE


75

SELECT下拉列表中可以有很多选项。

<select id="sel">
    <option value="car">1</option>
    <option value="bike">2</option>
    <option value="cycle">3</option>
    ...
</select>

我正在创建一个“更新配置文件”页面,从数据库中检索用户的配置文件,并显示带有这些值的表单。当涉及到SELECT下拉菜单时,有很多选择。因此,其乏味的测试所有价值

if (value == '1')
    echo "<option selected value='car'>1</option>";`

因此,我想从其值中选择相应的选项。就像我sel.value = 'bike'使用JavaScript一样时,应该选择选项2


2
您确定value="car"文本是1,而不是相反吗?是<select>静态代码,或像一个数据库动态创建的?
自由落体者2012年

您想在服务器端选择它吗?为什么没有服务器端标签?
epascarello 2012年

Answers:


118

您可以使用javascript选择值:

document.getElementById('sel').value = 'bike';

演示


3
记住:您可以使用sel.value ='bike'代替document.getElementById('sel')。value
Eduardo Xavier

2
@EduardoXavier,如果您首先运行'var sel = document.getElementById('sel');',那么可以。否则,不可以。如果该元素仅具有id,则唯一的方法是首先获取该元素。但是,如果它具有name属性并且在表单内,则可以使用formelement.sel.valuew3.org/TR/html5/forms.html#the-form-elementw3.org/TR/html5/forms.html#dom-form-nameditem
DenilsonSáMaia 2015年

3
@DenilsonSá这个问题是关于“ id”的使用的。您说的形式和名称是很严格的,但是当您说我无法以我建议的方式访问元素时,这是完全错误的。然后让我们做一些练习,在这里看看jsfiddle.net/tub6f0Lg:P干杯!
Eduardo Xavier

1
@EduardoXavier:我的立场是正确的,你是对的!感谢您指出!:) w3.org/TR/html5/browsers.html#named-access-on-the-window-object但是,尽管很方便,但由于窗口对象而依赖于ID用作全局变量可能会导致代码混乱和不可读。考虑另一个开发人员(甚至可能是一段时间后您自己)阅读代码。
DenilsonSáMaia



10

试试这个...。

JSFIDDEL演示

使用JavaScript

document.getElementById('sel').value = 'car';​​​​​​​​​​

使用jQuery

$('#sel').val('car');

1
document.getElementById('drpSelectSourceLibrary').value = 'Seven';
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.