JS：获取所选数据列表选项的 .html()答案

【问题标题】：JS: Get the .html() of selected datalist optionJS：获取所选数据列表选项的 .html()
【发布时间】：2017-01-30 06:12:45
【问题描述】：

我有以下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- add jquery -->

CITY<br>
<input id='cities' type="text" list="list_items">
<datalist id="list_items">
  <option value='Kent'>WA</option> <!-- PLEASE NOTE THAT THERE ARE REPEATING CITY NAMES -->
  <option value='Kent'>DE</option>
  <option value='New York City'>NY</option> <!-- AND REPEATING STATE NAMES -->
  <option value='Liverpool'>NY</option>
  <option value='Brentford'>SD</option>
</datalist>
<br><br>

STATE<br>
<input id='states' type="text" disabled>

<script>
  $('#cities').on('change', function(val) {
    $('#states').val(val.html())
  })
</script>

https://jsfiddle.net/pxcc1vn4/3/

我正在努力做到这一点，以便我可以从datalist 中选择一个项目，并将所选datalist option 的值放在第一个input 中，并拥有所选.html() datalistoption排在第二位input。

【问题讨论】：

标签： javascript jquery html dynamic datalist

【解决方案1】：

这样就可以了。

$('#cities').on('change', function() {
    $('#states').val($(this).text())
})

http://api.jquery.com/html/ 对比 http://api.jquery.com/val/

【讨论】：

这不起作用。它只是返回城市的名称。
我的错，你可以把 $(this).val() 改成 .text()
我的错，没有注意到您正在使用 datalist 属性。而不是解决你的问题。由于兼容性问题，我实际上建议使用jqueryui.com/autocomplete 来实现相同的功能而不是datalist。请参考html.com/attributes/input-list考虑

【解决方案2】：

试试这个。从第一个列表中选择值并在第二个列表中设置它

    $('#cities').on('change', function(event) {
      $("#states").val(event.target.value);
     })

Check this fiddle

【讨论】：

您选择后是否尝试过点击退出输入？更改事件只会在那之后触发。
@XYZ 不。它只是返回城市名称而不是州名。
@ChrisChen 你是什么意思？

【解决方案3】：

不要对两个选项使用相同的值

看看这个https://jsfiddle.net/pxcc1vn4/12/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- add jquery -->

CITY<br>
<input id='cities' type="text" list="list_items">
<datalist id="list_items">
  <option value='Kent In WA'>WA</option>
  <option value='Kent In DE'>DE</option>
  <option value='New York City'>NY</option>
  <option value='Liverpool'>NY</option>
  <option value='Brentford'>SD</option>

状态

$('#cities').on('change', function(event) {

    $('#states').val($('option[value="'+$(this).val()+'"]').html())
})

【讨论】：

我希望那里能够有重复的城市名称。在这一小段代码中，只有几个重复的城市名称，但在我的实际代码中，有数百个城市，其中很多是重复的。

【解决方案4】：

你应该使用val.currentTarget.value

$('#cities').on('change', function(val) {
  debugger;
  		
     var selectedValue = $("#list_items").find("option[value='"+val.currentTarget.value+"']").prop('outerHTML');
$('#states').val(selectedValue);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- add jquery -->

CITY<br>
<input id='cities' type="text" list="list_items">
<datalist id="list_items">
  <option value='Kent WA'>WA</option>
  <option value='Kent DE'>DE</option>
  <option value='New York City'>NY</option>
  <option value='Liverpool'>NY</option>
  <option value='Brentford'>SD</option>
</datalist>
<br><br>
STATE<br>
<input id='states' type="text" >

【讨论】：

这不起作用。它只是返回城市的名称。
@MakPo 我已经更新了我的答案，请检查它是否适合你我认为你只需要选择的值而不是整个 HTML
这不起作用，关键是，我希望那里能够有重复的城市名称。在这一小段代码中，只有几个重复的城市名称，但在我的实际代码中，有数百个城市，其中很多是重复的。
@MakPo 你必须找到任何替代方式而不是 DataList 因为:selected 不适用于 datalist 选项，因为一个 datalist 可以为多个输入提供建议。如果两个不同的输入包含列表中的两个不同的建议，那么哪个会是选定的？或者你只需要删除重复的城市名称或编辑城市名称，就像我完成了我的 sn-p

【解决方案5】：

试试这个sn-p，

HTML 代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- add jquery -->

CITY<br>
<input id='cities' type="text" list="list_items">
<datalist id="list_items">
  <option value='Kent'>WA</option>
  <option value='Kent'>DE</option>
  <option value='New York City'>NY</option>
  <option value='Liverpool'>NY</option>
  <option value='Brentford'>SD</option>
</datalist>
<br><br>
STATE<br>
<input id='states' type="text" disabled>

JS 代码：

$(document).on("input", "#cities", function(){
  var val = this.value;

  if($('#list_items').find('option').filter(function(){
        return this.value.toUpperCase() === val.toUpperCase();        
    }).length) {
        //send ajax request
        $("#states").val(this.value);
    }
});

这里正在工作jsfiddle

编辑

HTML 代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- add jquery -->

CITY<br>
<input id='cities' type="text" list="list_items">
<datalist id="list_items">
  <option value='Kent'>WA</option>
  <option value='Kent'>DE</option>
  <option value='New York City'>NY</option>
  <option value='Liverpool'>NY</option>
  <option value='Brentford'>SD</option>
</datalist>
<br><br>
STATE<br>
<input id='states' type="text" disabled>
<input id='secondinput' type="text" disabled>

JS 代码：

$(document).on("input", "#cities", function(){
  var val = this.value;

  if($('#list_items').find('option').filter(function(){
        return this.value.toUpperCase() === val.toUpperCase();        
    }).length) {
        //send ajax request
        $("#states").val(this.value);
        $("#secondinput").val($("#list_items option[value='"+this.value+"']").text());
    }


});

这是有效的jsfiddle

【讨论】：

这只是返回城市名称而不是州名。
尝试选择 'Kent' 'DE' 结果是 'WADE'。它连接了“WA”和“DE”。