How to get value of input text field in select box option value

Question

I used an custom select box with a search input and a button of "add".this input field act like search and searches regarding the value in dropdown option . but when the value don't match with the values then i need that on click of that add button the value of this field should add in the option and also act as selected value of the dropdown . please help ...

thanx..

 $(function() { $(".standards").customselect(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src='http://classvita.com/admin/res/javascripts/jquery-customselect.js'></script> <link href='http://classvita.com/admin/res/stylesheets/jquery-customselect.css' rel='stylesheet' /> <select name='standard' class='custom-select standards'> <option value=''>Add Particular</option> <option value='1'>abc</option> <option value='2'>aabc</option> <option value='3'>abbc</option> </select> 

Answer 1

This is not the solution, but this is a way to reach your solution.

<select name='standard' class='custom-select standards' id="SelectList">  //add id attribute
<option value=''>Add Particular</option>
<option value='1'>abc</option>
<option value='2'>aabc</option>
<option value='3'>abbc</option>
</select>

here is how you can add a select-list Item:

JS:

var html = "<option value=\""+ ListItemNumber +"\">"+ TheSearchTerm +"</option>";
$('#SelectList').append(html);   //binding the html
$('#SelectList').val(ListItemNumber);   //Select the ListItem

Hope this helps you.....

Answer 2

You need to attach click event on your Add New Item button and on click of that button you should create a new option and add to your custom select as follows,

$(document).on('click', "#add_new_button_id", function(){
  //get the value from input text
   var typedValue = $("#input_id").val();
  //create option on click and add to your custom select
  $('.custom-select').append($("<option></option>").attr("value", typedValue).text(typedValue));
});

Answer 3

$('body').on('change','select[name="standard"]',function(){

var pid = $(this).val(); //grabbing the current value of the select.
if(check here if pid lies in some sort of arrays ,values etc)
{
$('select[name="standard"]').append('<option value="'+pid+'">'+pid+'</option>');

}
});

Answer 4

 $(function() { $(".standards").customselect(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src='http://classvita.com/admin/res/javascripts/jquery-customselect.js'></script> <link href='http://classvita.com/admin/res/stylesheets/jquery-customselect.css' rel='stylesheet' /> <select name='standard' class='custom-select standards'> <option value=''>Add Particular</option> <option value='1'>abc</option> <option value='2'>aabc</option> <option value='3'>abbc</option> </select>