Question

在下面这段代码中，我试图从'datalist'元素中的'select'元素中获取所选'option'的值。尝试了一些东西，但是，我做不到。我期待只有javascript的解决方案。截至目前，它总是警告第一个选项值，但我们更改选项值。当我更改输入框上的选项值时，它应该警告实际选项值。例如，如果我选择'蓝莓'，那么它应该省略'Bluberry'。

<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>

有什么想法吗？请。

Answer 1

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

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

Answer 2

如果您希望仅在使用其中一个预设值时获取警报，请尝试以下操作：

<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/

这应该有效

Greetz Anders

Javascript：如何在内部选择中获取数据列表中的选定选项值

2 个答案: