選択ボックスの入力テキストフィールドの値を取得する方法オプション値

Question

検索入力と「追加」ボタンを備えたカスタム選択ボックスを使用しました。この入力フィールドは、検索のように動作し、ドロップダウンオプションの値を検索します。値が値と一致しない場合、この追加ボタンをクリックすると、このフィールドの値がオプションに追加され、ドロップダウンの選択値として機能する必要があります。 ...

ありがとう..

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

これは解決策ではありませんが、これはあなたのソリューションに到達するための方法です助けてください。ここ

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

は、あなたが選択リスト項目を追加する方法です。

JS：

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

はこれがあなたのお役に立てば幸いです.....

Answer 2

あなたはclickを添付する必要がありますイベントのAdd New Itemボタンをクリックし、そのボタンをクリックすると、新しいオプションを作成し、customに次のように選択してください。

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