Javascript:如何获取数据列表中的选定选项值，其中包含内部选择

Javascript: how to get selected option value that is in the datalist with inside select

本文关键字：选项 选择 包含内 Javascript 何获取 获取 列表 数据      更新时间：2023-09-26

在下面的代码中，我试图从"datalist"元素中的"选择"元素中获取所选"选项"的值。尝试过一些东西，但是，我做不到。我期待仅在 JavaScript 中提供解决方案。截至目前，它总是提醒第一个选项值，但是我们更改了选项值。当我更改输入框上的选项值时，它应该提醒实际选项值。例如，如果我选择"蓝莓"，那么它应该省略"蓝莓"。

<html>
    <head>
        <title>HTML 5 test Elements</title>
    </head>
    <body>
        <div>
            <label>Your favorite fruit:
                <datalist id="fruit">
                    <select name="fruits">
                        <option value="Blackberry">Blacskberry</option>
                        <option value="Blackcurrant">Blackcurrant</option>
                        <option value="Blueberry">Blueberry</option>
                    </select>
                    If other, please specify:
                </datalist>
                <input type="text" name="fruit" list="fruit"/>
            </label>
            <script type="text/javascript">
                document.getElementsByName("fruit")[0].onchange = function (event) {
                    var evt = event || window.event;
                    var parElem = evt.srcElement || evt.target;
                    alert(document.getElementsByName("fruits")[0].options[document.getElementsByName("fruits")[0].selectedIndex].value);
                }
            </script>
        </div>
    </body>
</html>

知道吗？请。

首先，您可以删除<select>元素并保留<datalist>及其嵌套<options>。只需使用数据列表。然后，您可以使用 input 事件检查连接到数据列表的<input>上的更改

这是一个工作小提琴：http://jsfiddle.net/bkab62rq/

如果您只想在使用其中一个预设值时才收到警报，请尝试以下操作：

<html>
  <head>
      <title>HTML 5 test Elements</title>
  </head>
  <body>
              <div>
        <label>Your favorite fruit:
            <datalist id="fruit">
                <select id="fruits">
                    <option value="Blackberry">Blacskberry</option>
                    <option value="Blackcurrant">Blackcurrant</option>
                    <option value="Blueberry">Blueberry</option>
                </select>
                If other, please specify:
            </datalist>
            <input type="text" name="fruit" list="fruit"/>
        </label>                  
      <script type="text/javascript">
         document.getElementsByName("fruit")[0].onchange = function (event) {
                var evt = event || window.event;
                var parElem = evt.srcElement || evt.target;                             
                for (var i=0; i<document.getElementById('fruits').options.length; i++)
                { 
                    if (document.getElementById('fruits').options[i].value ==  document.getElementsByName("fruit")[0].value) 
                    { 
                      alert(document.getElementById('fruits').options[i].value);
                      break;
                    }                                                
               }
            }
      </script></div></body></html>

这应该可以做魔术;)

在这里你得到了一个小提琴：

http://jsfiddle.net/16e8qanz/19/

这应该有效

格莱兹·安德斯

相关文章：