html中的<select>怎么使用selectedIndex属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html中的<select>怎么使用selectedIndex属性相关的知识,希望对你有一定的参考价值。

<select id="en" selectedIndex="1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
为什么还是显示成0呢?

经验证,貌似直接给select标签赋值selectedIndex="1"是不可以的,不过可以用js来控制,比如在onload中这样写
onload=function()
document.getElementById("en").selectedIndex=1;
追问

selectedIndex="1"的写法确实是不行,用JS实现的话也存在一定的问题,因为作为默认的显示项是根据php传过来的数据更改的,这些数据是不在页面上显示的,而JS要获取这些数据的话也难啊,想用1,但是html中又好像不能直接用算数运算符

追答

php传过来?session?可以将这个值赋值给一个标签,然后用js取这个标签的值

参考技术A 定义和用法
selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。
注释:若允许多重选择,则仅会返回第一个被选选项的索引号。
语法
selectObject.selectedIndex=number
实例
下面的例子可提示出被选选项的索引号:
<html>
<head>
<script type="text/javascript">
function getIndex()

var x=document.getElementById("mySelect")
alert(x.selectedIndex)

</script>
</head>
<body>

<form>
Select your favorite fruit:
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
<br /><br />
<input type="button" onclick="getIndex()"
value="Alert index of selected option">
</form>

</body>
</html>

运行完 点击 按钮 显示的是第几个option
<option value="0">0</option> 这句显示在文本框 当然是0 了追问

不用JS可以改变其中的显示项吗?因为有多个这个的,但是希望每个显示出来的option可以改变,不用在对应option后加属性select=“selected”的方法,这样不是实时改变,那么有什么办法可以做到呢?

我可以将 required 属性应用于 HTML5 中的 <select> 字段吗?

【中文标题】我可以将 required 属性应用于 HTML5 中的 <select> 字段吗?【英文标题】:Can I apply the required attribute to <select> fields in HTML5? 【发布时间】:2011-08-28 06:27:09 【问题描述】:

如何检查用户是否从 HTML5 中的 &lt;select&gt; 字段中选择了某些内容?

我看到&lt;select&gt; 不支持新的required 属性...那我必须使用JavaScript 吗?还是我缺少什么? :/

【问题讨论】:

如果您对任何级别的跨浏览器兼容性感兴趣,您可能不得不使用 JavaScript。你想要的属性是selectedIndex 根据 HTML5 规范的当前编辑草稿(2011 年 8 月 6 日),select 元素确实具有必需的属性。 “必需的属性是一个布尔属性。指定后,用户将需要在提交表单之前选择一个值。” dev.w3.org/html5/spec/Overview.html#the-select-element 【参考方案1】:

强制:将第一个值留空 - 要求对空值起作用

先决条件:正确的 html5 DOCTYPE 和命名输入字段

<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>

根据the documentation(列表和粗体是我的)

必需的属性是布尔值 属性。 指定时,用户 将需要选择一个值 在提交表单之前。

如果是一个选择元素

指定了一个必需的属性, 没有指定多重属性, 并且显示尺寸为 1(不具有 SIZE=2 或更大 - 如果不需要,请省略它); 如果值 中的第一个选项元素 选择元素的选项列表(如果 any) 是空字符串(即显示为value=""), 还有那个 选项元素的父节点是 选择元素(而不是 optgroup 元素),

那么这个选项就是 选择元素的占位符标签 选项。

【讨论】:

另外,这样用户就不能选择非选项一旦它被选中: 这没有意义......而且它在几个浏览器上也不起作用 @CoolAJ86 适用于 Chrome 23、Firefox 16 和 IE 10。 我看到 2 票反对。如果您想对 WHY 的这个 PLEASE 评论投反对票 文档的释义非常有帮助;谢谢【参考方案2】:

根据规范,&lt;select&gt; 元素确实支持 required 属性:

http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element

哪个浏览器不支持这一点?

(当然,无论如何你都必须在服务器上进行验证,因为你不能保证用户会启用 JavaScript。)

【讨论】:

我确信他只需要一个 value="" 在第一个条目上 - 如果没有 value 属性或所有选项上的 value 所需的失败触发,因为 select 返回一个实际值跨度> @mplungjan:,明白了——很好。 @PaulD.Waite 我们还不能保证用户会启用 Javascript 吗?我现在只从事网络开发大约 2 年,而且我从未遇到过这个问题。 @user137717:这是网络。你不能保证什么。当然,您可以决定不值得满足。【参考方案3】:

是的,它正在工作:

<select name="somename" required>
     <option value="">Please select</option>
     <option value="one">One</option>
</select>

您必须将第一个选项留空。

【讨论】:

【参考方案4】:

默认情况下,您可以使用选项元素的selected 属性来选择选项。您可以对 select 元素使用 required 属性来确保用户选择了某些内容。

在Javascript中,您可以查看selectedIndex属性来获取所选选项的索引,也可以查看value属性来获取所选选项的值。

根据 HTML5 规范,selectedIndex“返回第一个选中项的索引,如果有的话,或者 -1 如果没有选中项。value”返回第一个选中项的值,如果任何,或者如果没有选定的项目,则为空字符串。”所以如果 selectedIndex = -1,那么你知道他们没有选择任何东西。

<button type="button" onclick="displaySelection()">What did I pick?</button>
<script>
    function displaySelection()
    
        var mySelect = document.getElementById("someSelectElement");
        var mySelection = mySelect.selectedIndex;
        alert(mySelection);
    
</script>

【讨论】:

@Apostle - 请停止尝试通过编辑更改此答案。如果您认为这是不正确的,请随时留下您自己的答案。 @BradLarson 起初我不太明白:代码不是此问题中问题的完整解决方案,或者是此答案最后一段的解释性示例.在这种情况下可能是第二个。我认为最好将此代码组织为 sn-p 并显示结果-1。抱歉,我没有先在 cmets 中澄清。【参考方案5】:

需要将optionvalue属性设置为空字符串:

<select name="status" required>
    <option selected disabled value="">what's your status?</option>
    <option value="code">coding</option>
    <option value="sleep">sleeping</option>
</select>

当用户在form 上按下submit 时,select 会将所选optionvalue 返回到服务器。空的value 与空的text 输入相同-> 引发required 消息。


w3schools

value 属性指定提交表单时要发送到服务器的值。

Example

【讨论】:

【参考方案6】:
<form action="">

<select required>

  <option selected disabled value="">choose</option>
  <option value="red">red</option>
  <option value="yellow">yellow</option>
  <option value="green">green</option>
  <option value="grey">grey</option>

</select>
<input type="submit">
</form>

【讨论】:

这个答案只是重复了前面的例子,没有额外的解释。 请在您的答案中添加一些解释,以便其他人可以从中学习【参考方案7】:

首先您必须在第一个选项中分配空白值。 即在此处选择。仅需要即可。

【讨论】:

【参考方案8】:

将选择框第一项的值设为空白。

因此,当您每次发布表单时,您都会获得空白值,并且使用这种方式您会知道用户没有从下拉列表中选择任何内容。

<select name="user_role" required>
    <option value="">-Select-</option>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>

【讨论】:

【参考方案9】:

试试这个,这个行得通,我试过这个,这个行得通。

<!DOCTYPE html>
<html>
<body>

<form action="#">
<select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>

</body>
</html>

【讨论】:

请在您的答案中添加一些解释,以便其他人可以从中学习【参考方案10】:

如果第一个选项的值为 null,则效果很好。解释 :HTML5 将在按钮提交时读取空值。如果不为空(值属性),则假定所选值不为空,因此验证将起作用,即通过检查选项标签中是否存在数据。因此它不会产生验证方法。但是,我猜另一面很清楚,如果 value 属性设置为 null 即 (value = "" ),HTML5 将在第一个或更确切地说是默认选择的选项上检测到一个空值,从而发出验证消息。谢谢你的提问。乐意效劳。很高兴知道我是否这样做了。

【讨论】:

【参考方案11】:

在 html5 中你可以使用完整的表达式:

<select required="required">

我不知道为什么短表达式不起作用,但试试这个。 会解决的。

【讨论】:

【参考方案12】:

试试这个

<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>

【讨论】:

请在您的答案中添加一些解释,以便其他人可以从中学习【参考方案13】:

你也可以用 JQuery 动态地做到这一点

需要设置

$("#select1").attr('required', 'required');

删除必需的

$("#select1").removeAttr('required');

【讨论】:

以上是关于html中的<select>怎么使用selectedIndex属性的主要内容,如果未能解决你的问题,请参考以下文章

html select 怎么动态生成option

如何获取select下拉框的值

CSS怎么去掉select的下拉箭头样式

使用 jQuery 通过 JSON 数据填充 HTML 文档中的 <select> 元素

jsp页面里 怎么让文本输入框的值 根据select所选的值而动态显示出相应的值

css select dropdown bold on some <option>'s