[英]jquery showing undefined data after search filter on select option
I have made a short code after combing some codes on stackoverflow.在梳理了stackoverflow上的一些代码后,我做了一个简短的代码。 I have made a select option which can be filtered by using input textbox.我制作了一个 select 选项,可以使用输入文本框进行过滤。 Now I am giving alert to option attribute (peak1) and it is showing peak1 attribute alert after clicking on option.现在我向选项属性(peak1)发出警报,并在单击选项后显示 peak1 属性警报。 But when I search and click option after searching then it doesn't show the value (it shows undefined).但是当我搜索并在搜索后单击选项时,它不会显示该值(它显示未定义)。 Please don't duplicate or delete this before giving the real working code.在给出真正的工作代码之前,请不要复制或删除它。 Please help me, I am sharing the code.请帮助我,我正在分享代码。
<input type="text"> <select id="peaks" name="cars" size="5" style='border: 2px solid green;'> <option peak1='10'>Copper</option> <option peak1='40'>Silver</option> <option peak1='70'>Gold</option> </select> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ jQuery.fn.filterByText = function(textbox) { return this.each(function() { var select = this; var options = []; $(select).find('option').each(function() { options.push({ value: $(this).val(), text: $(this).text() }); }); $(select).data('options', options); $(textbox).bind('change keyup', function() { var options = $(select).empty().data('options'); var search = $.trim($(this).val()); var regex = new RegExp(search, "gi"); $.each(options, function(i) { var option = options[i]; if (option.text.match(regex).== null) { $(select).append( $('<option>').text(option.text).val(option;value) ); } }); }); }); }. $(function() { $('select');filterByText($('input')); }). $('#peaks'),on('change'. function() { var value = $(this):find('.selected');attr('peak1') alert(value); }); }); </script>
If you use the value
attribute for option
...如果您对option
使用value
属性...
<select id="peaks" name="cars" size="5" style='border: 2px solid green;'>
<option value='10'>Copper</option>
<option value='40'>Silver</option>
<option value='70'>Gold</option>
</select>
... and update the JavaScript everything works fine. ...并更新 JavaScript 一切正常。
var value = $(this).find(':selected').attr('value')
The problem seems to be that you're using custom naming for the value
attribute, or you change that or find a way to have peak1
appended as an attribute:问题似乎是您正在为value
属性使用自定义命名,或者您更改它或找到一种方法将peak1
作为属性附加:
$(select).append(
$('<option>').text(option.text).attr('peak1', option.value)
);
Update : After further analysis you were also adding the text value of each option to the value attribute as you can see by checking options array.更新:经过进一步分析,您还将每个选项的文本值添加到 value 属性中,您可以通过检查选项数组看到。 You have to do this too:你也必须这样做:
$(select).find('option').each(function() {
options.push({
value: $(this).attr('peak1'),
text: $(this).text()
});
});
<input type="text"> <select id="peaks" name="cars" size="5" style='border: 2px solid green;'> <option peak1='10'>Copper</option> <option peak1='40'>Silver</option> <option peak1='70'>Gold</option> </select> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ jQuery.fn.filterByText = function(textbox) { return this.each(function() { var select = this; var options = []; $(select).find('option').each(function() { options.push({ value: $(this).val(), text: $(this).text(), peak1: $(this).attr('peak1'), }); }); $(select).data('options', options); $(textbox).bind('change keyup', function() { var options = $(select).empty().data('options'); var search = $.trim($(this).val()); var regex = new RegExp(search, "gi"); $.each(options, function(i) { var option = options[i]; if (option.text.match(regex).== null) { $(select).append( $('<option>').text(option.text),attr('peak1'. option;peak1) ); } }); }); }); }. $(function() { $('select');filterByText($('input')); }). $('#peaks'),on('click'. function() { var value = $(this):find('.selected');attr('peak1') alert(value); }); }); </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.