Nhà dữ liệu HTML5 có thể phân biệt giá trị và văn bản tùy chọn không?

Question

Thuộc tính danh sách/yếu tố dữ liệu của biểu mẫu HTML5 hiển thị trình đơn thả xuống của các lựa chọn mà người dùng có thể chọn, chỉnh sửa và thậm chí nhập một số văn bản. Tất cả điều này có thể đạt được cùng một lúc với một mã sạch và mạnh mẽ:

<input list="states"> 
<datalist id="states"> 
    <option value="One"> 
    <option value="Two"> 
</datalist> 

Tuy nhiên, làm thế nào để thực hiện một hình thức như gửi một giá trị mà là khác nhau từ các văn bản tùy chọn, như trong chọn/tùy chọn thông thường (dưới đây) ?

<select> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
</select> 

Answer 1

Dường như bạn không thể với HTML thuần túy mà không cần trợ giúp JS + CSS.

hãy thử điều này tôi hy vọng nó giúp bạn.

html

<input id="datalisttestinput" list="stuff" ></input> 
     <datalist id="stuff"> 
      <option id="3" value="Collin" > 
      <option id="5" value="Carl"> 
      <option id="1" value="Amy" > 
      <option id="2" value="Kristal"> 
     </datalist> 

kịch bản

function GetValue() { 
      var x = $('#datalisttestinput').val(); 
      var z = $('#stuff'); 
      var val = $(z).find('option[value="' + x + '"]'); 
      var endval = val.attr('id'); 
      alert(endval); 
     } 

nhất Wishes Kumar

Answer 2

Dưới đây là câu trả lời được sửa đổi Kumah rằng sử dụng một lĩnh vực ẩn chứa những giá trị mà cuối cùng được gửi đến máy chủ.

$('#inputStates').change(function(){ 
    var c = $('#inputStates').val(); 
    $('#inputStates').val(getTextValue()); 
    $('#statesHidden').val(c); 
}); 

function getTextValue(){ 
    var val = $('#inputStates').val(); 
    var states = $('#states'); 
    var endVal = $(states).find('option[value="' + val + '"]'); 
    //depending on your logic, if endVal is empty it means the value wasn't found in the datalist, you can take some action here 
    return endVal.text(); 
}