2014-09-02 2 views
16
<!DOCTYPE html> 
<html> 
<body> 

<input list="browsers" name="browser"> 
<datalist id="browsers"> 
    <option value="Internet Explorer">1</option> 
    <option value="Firefox">2</option> 
    <option value="Chrome">3</option> 
    <option value="Opera">4</option> 
    <option value="Safari">5</option> 
</datalist> 
<input type="submit"> 
</form> 

</body> 
</html> 

http://jsfiddle.net/j7ehtqjd/1/DataList एचटीएमएल 5 में पाठ प्रदर्शित करने के लिए कैसे और महत्व नहीं

मैं एक बेला संलग्न है। कृपया जांचें। मैं जिस समाधान को प्राप्त करना चाहता हूं वह तब होता है जब मैं ड्रॉपडाउन पर क्लिक करता हूं तो मान प्रदर्शित होता है, लेकिन मुझे टेक्स्ट 1,2,3,4,5 प्रदर्शित होना चाहिए। मुझे अपनी वास्तविक समस्या के लिए एक जेसन प्रतिक्रिया का उपयोग करना होगा। केवल पाठ प्रदर्शित किया जाना चाहिए और मान को सामान्य ड्रॉपडाउन की तरह छुपाया जाना चाहिए। यह स्वत: पूर्ण सुविधा आवश्यक है और मैं सामान्य ड्रॉपडाउन के साथ चला गया होता।

+0

आप 'मान' को दूसरे पैरामीटर (उदाहरण के लिए,' डेटा-वैल्यू ') पर ले जा सकते हैं और 1,2,3,4,5 को' मान' के रूप में सेट कर सकते हैं। – Regent

+0

लेकिन मुझे jquery का उपयोग कर बैक एंड पर मूल्य भेजने की आवश्यकता है। – Cerebus1504

+0

आप 'value' – Regent

उत्तर

19

संपादित करें, अद्यतन

रीजेंट

बाद

कोशिश (v3)

एचटीएमएल

<input id="selected" list="browsers" name="browser"> 
<datalist id="browsers"> 
    <option data-value="InternetExplorer" value="1"></option> 
    <option data-value="Firefox" value="2"></option> 
    <option data-value="Chrome" value="3"></option> 
    <option data-value="Opera" value="4"></option> 
    <option data-value="Safari" value="5"></option> 
</datalist> 
<input id="submit" type="submit"> 

js

$(document).ready(function() { 

var data = {}; 
$("#browsers option").each(function(i,el) { 
    data[$(el).data("value")] = $(el).val(); 
}); 
// `data` : object of `data-value` : `value` 
console.log(data, $("#browsers option").val()); 


    $('#submit').click(function() 
    { 
     var value = $('#selected').val(); 
     alert($('#browsers [value="' + value + '"]').data('value')); 
    }); 
}); 

jsfiddle http://jsfiddle.net/guest271314/j7ehtqjd/13/

+0

मूल्य कैसे प्राप्त करें और पहले मुझे $ ("# ब्राउज़र") टाइप करें। Val()। – Cerebus1504

+1

@ सेरेबस 1504 ठीक है, शायद [fiddle] (http://jsfiddle.net/j7ehtqjd/3/) मेरे प्रश्न की टिप्पणी से इसकी पूर्णता – Regent

+0

के उत्तर में जोड़ा जाना चाहिए ठीक है, मैं कोशिश करूंगा कि मुझे यह नहीं मिल रहा है – Cerebus1504

संबंधित मुद्दे