jquery showing undefined data after search filter on select option

Question

I have made a short code after combing some codes on stackoverflow. I have made a select option which can be filtered by using input textbox. Now I am giving alert to option attribute (peak1) and it is showing peak1 attribute alert after clicking on option. 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>

Answer 1

If you use the value attribute for option ...

<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.

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:

$(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. You have to do this too:

$(select).find('option').each(function() {
    options.push({
      value: $(this).attr('peak1'),
      text: $(this).text()
    });
  });

Answer 2

 <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>