ここ

Question

私はその値1を取りたい選択バンガロールをしています場合、私はhydrabad手段2は、私がしようとしていたと、したいが、私は未定義

を取得しています。このコードでは、データ-id値を取得する方法クリックイベントハンドラthisインサイド

$(document).ready(function() { 
 
    $("#resi_btn_search").click(function() { 
 
    alert($(this).data("id")); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="col-md-2 col-sm-2 col-xs-2" style="padding-left:0px;padding-right:1px;"> 
 
    <input list="options" type="text" class="form-control" style="border-radius:0px;height: 46px;" name="location12" id="location12" placeholder="City"> 
 
    <datalist id="options"> 
 
    <option data-id="1">Bangalore</option> 
 
    <option data-id="2">hydrabad</option> 
 
    <option data-id="3">Miredhpedia</option> 
 
    <option data-id="3">Bangalore</option> 
 
    </datalist> 
 
    <input type="submit" id="resi_btn_search"> 
 
</div>

Answer 1

クリックした要素と$(this).data("id")を指しundefinedでクリックされた要素のデータ属性値を取得しようとするだろう。

値属性でデータリストを更新し、後でattribute equals selectorを使用して選択したオプションを取得できます。

$(document).ready(function() { 
 
    $("#resi_btn_search").click(function() { 
 
    console.log($('#options option[value="' + $('#location12').val() + '"]').data('id')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="col-md-2 col-sm-2 col-xs-2" style="padding-left:0px;padding-right:1px;"> 
 
    <input list="options" type="text" class="form-control" style="border-radius:0px;height: 46px;" name="location12" id="location12" placeholder="City"> 
 
    <datalist id="options"> 
 
    <option data-id="1" value="Bangalore" /> 
 
    <option data-id="2" value="hydrabad" /> 
 
    <option data-id="3" value="Miredhpedia" /> 
 
    <option data-id="3" value="Bangalore" /> 
 
    </datalist> 
 
    <input type="submit" id="resi_btn_search"> 
 
</div>

---

それとも、input要素の値を使用して、選択したオプションを取得するためにfilter()メソッドを使用する必要があります。

$(document).ready(function() { 
 
    $("#resi_btn_search").click(function() { 
 
    console.log($('#options option').filter(function() { 
 
     return $('#location12').val() == this.value; 
 
    }).data("id")); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="col-md-2 col-sm-2 col-xs-2" style="padding-left:0px;padding-right:1px;"> 
 
    <input list="options" type="text" class="form-control" style="border-radius:0px;height: 46px;" name="location12" id="location12" placeholder="City"> 
 
    <datalist id="options"> 
 
    <option data-id="1">Bangalore</option> 
 
    <option data-id="2">hydrabad</option> 
 
    <option data-id="3">Miredhpedia</option> 
 
    <option data-id="3">Bangalore</option> 
 
    </datalist> 
 
    <input type="submit" id="resi_btn_search"> 
 
</div>

Answer 2

あなたのオプションは$('#options').children()にあります。

function SearchResiCtrl() { 
 
    var $opts = $('#options').children(); 
 
    var input = $('#location12'); 
 
    var value = input.val().trim(); 
 
    
 
    var opts = Array 
 
    .prototype 
 
    .map 
 
    .call($opts, function(el) { 
 
     var label = el.textContent; 
 
     
 
     return { 
 
     id: el.dataset.id, 
 
     label: label, 
 
     isSelected: value === label 
 
     }; 
 
    }) 
 
    ; 
 
    
 
    var selected = opts.filter(function(o) { 
 
    return o.isSelected; 
 
    })[0] || null; 
 
    
 
    console.log("options", opts); 
 
    console.log("selected", selected); 
 
} 
 

 
$(document).ready(function() { 
 
    return $('#resi_btn_search').click(SearchResiCtrl); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
 
</script> 
 

 
<div class="col-md-2 col-sm-2 col-xs-2" style="padding-left:0px;padding-right:1px;"> 
 
    <input list="options" type="text" name="location12" id="location12" placeholder="City"> 
 
    
 
    <datalist id="options"> 
 
    <option data-id="1">Bangalore</option> 
 
    <option data-id="2">hydrabad</option> 
 
    <option data-id="3">Miredhpedia</option> 
 
    <option data-id="3">Bangalore</option> 
 
    </datalist> 
 
    
 
    <input type="submit" id="resi_btn_search"> 
 
</div>

Answer 3

$(function() { 
 

 
$("#button").click(function() { 
 
    var val = $('#item').val() 
 
    var xyz = $('#items option').filter(function() { 
 
     return this.value == val; 
 
    }).data('xyz'); 
 
    var msg = xyz; 
 
    alert(msg) 
 

 
}) 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<input list="items" id="item"/> 
 

 
<datalist id="items"> 
 
    <option value="A item" data-xyz = "1" selected="true"> 
 
    <option value="aa item" data-xyz = "2" > 
 
    <option value="C item" data-xyz = "3" > 
 
    <option value="D item" data-xyz = "4" > 
 
    <option value="E item" data-xyz = "5" > 
 
    </datalist> 
 
<input type="button" id="button" value="Get xyz" />