私は単純なものを変換するjqueryプラグインが必要です
<select>
<option>text</option>
</select>
<lu>のリストやリストのような完全にカスタマイズ可能なリストで<div>、この種のプラグインをかなり多く見つけましたが、何かを入力してオプションとして設定するオプションはありません。
私は一種のリストを持っているとしましょう：
<select>
<option value="text">text</option>
<option value="other">other</option>
</select>
今、私は他のオプションを に変換したいの<input type="text" />ですが、それを行うプラグインが必要だと確信しています。
どのように見えるかの例を作成しました。左側が現在のプラグインで、右側が必要なものです。現在のプラグインを編集できることはわかっていますが、私にとっては大きすぎて時間がかかります.
まさにそれを行うjQueryプラグインはありません。ただし、jQuery UI selectmenuプラグインがあります。これは、select要素をhtml表現に変換して、selectメニューのスタイルを設定できるようにします。このプラグインは、テキストをフォーマットするためのコールバックも提供します。この場合、「その他」オプションを入力ボックスにフォーマットできます。
次の選択があるとします。
<select name="otherselect" id="otherselect">
<option value="united-states">United States</option>
<option value="latvia" selected="selected">Latvia</option>
<option value="france">France</option>
<option>Other</option>
</select>
次を使用して、このプラグインでselectmenuを作成できます。
$(function(){
selectMenu = $('select#otherselect').selectmenu({
style:'popup',
width: 300,
format: otherFormatting
});
});
ここでの関数otherFormattingは、Otherオプションをフォーマットする関数です。これが私たちの機能です：
var otherFormatting = function(text){
// if text contains 'Other' format into Other input box...
if ( text == "Other" ) {
var button = $('<input type="submit" onclick="selectOther(this)" value="select"/>');
var input = $('<input class="other" type="text" value="Other..."/>');
return $('<span/>')
.append(input)
.append(button)[0].outerHTML;
}
return text;
}
ボタンがクリックされたときに呼び出されるselectOther関数は、プラグインを拡張する関数です。この機能は、ボタンがクリックされたときにアクティブになり、フォームを使用して簡単に送信できるように、選択の値を設定します。ただし、（選択ボックスに入力ボックスを表示する代わりに）新しい選択メニューに表示される値を設定します。
基本的にjQueryUIウィジェットであるこのプラグインを拡張する必要があります。ただし、プラグインはいくつかのイベントをバインドし、入力フィールドとボタンを機能させることができないため、これらのいくつかのバインドを解除する必要があります。これは、選択メニューを開くときに行います。このためには、ウィジェットのopen関数をオーバーライドし、いくつかのイベントのバインドを解除する関数を呼び出してから、元のopen関数を使用してメニューを開く必要があります。
これをすべてまとめると：
<!DOCTYPE html>
<html>
<head>
<title>Demo Page for jQuery UI selectmenu</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<link type="text/css" href="../../themes/base/jquery.ui.selectmenu.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.selectmenu.js"></script>
<style type="text/css">
body {font-size: 62.5%; font-family: "Verdana",sans-serif; }
fieldset { border: 0; }
label, select, .ui-select-menu { float: left; margin-right: 10px; }
select { width: 200px; }
</style>
<script type="text/javascript">
// We need to able to call the original open method, save intoIf you need to call original method
var fn_open = $.ui.selectmenu.prototype.open;
$.widget("ui.selectmenu", $.extend({}, $.ui.selectmenu.prototype, {
open : function() {
// Every the selectmenu is opened, unbind some events...
this._unbindEvents();
fn_open.apply(this, arguments);
},
_unbindEvents : function() {
var el = $(this.list).find('li:has(input.other)').eq(0);
// unbind events, we need a different event here...
el.unbind('mouseup');
el.unbind('mousedown');
el.bind('mousedown', function() {
// We need to call focus here explicitly
$(this).find('input.other').eq(0).focus();
// Empty field on click...
if ( $(this).find('input.other').eq(0).val() == 'Other...' )
$(this).find('input.other').eq(0).val("");
});
// Unbind keydown, because otherwise we cannot type in our textfield....
this.list.unbind('keydown');
// We only need to return false on the mousedown event.
this.list.unbind('mousedown.selectmenu mouseup.selectmenu');
this.list.bind('mousedown', function() {
return false;
});
},
selectOther : function(el) {
var button = $(el);
// li item contains the index
var itemIndex = button.parent().parent().parent().data('index');
var changed = itemIndex != this._selectedIndex();
// Get the value of the input field
var newVal = button.prev().val();
this.index(itemIndex);
// Update the display value in the styled select menu.
this.newelement.find('.' + this.widgetBaseClass + '-status').html(newVal);
// Update the value and html of the option in the original select.
$(this.element[0].options[itemIndex]).val(newVal).html(newVal);
// Call the select, change and close methods
var e = jQuery.Event("mouseup");
this.select(e);
if ( changed )
this.change(e);
this.close(e);
}
}));
var selectMenu;
$(function(){
selectMenu = $('select#otherselect').selectmenu({
style:'popup',
width: 300,
format: otherFormatting
});
});
function selectOther(el) {
// Call our self defined selectOther function.
selectMenu.selectmenu('selectOther', el);
}
//a custom format option callback
var otherFormatting = function(text){
// if text contains 'Other' format into Other input box...
if ( text == "Other" ) {
var button = $('<input type="submit" onclick="selectOther(this)" value="select"/>');
var input = $('<input class="other" type="text" value="Other..."/>');
return $('<span/>')
.append(input)
.append(button)[0].outerHTML;
}
return text;
}
</script>
</head>
<body>
<h2>Select with Other option input field</h2>
<fieldset>
<label for="otherselect">Select a value:</label>
<select name="otherselect" id="otherselect">
<option value="united-states">United States</option>
<option value="latvia" selected="selected">Latvia</option>
<option value="france">France</option>
<option>Other</option>
</select>
</fieldset>
<button onclick="console.log($('#otherselect').val());">Test</button>
</body>
</html>
これを試すには、ここからプラグインをダウンロードして、js/cssファイルのURLが正しいことを確認してください。（このhtmlファイルをdemos / selectmenuフォルダーに入れましたが、機能します...）。もちろん、ボタンを画像に置き換えることもできます。
これを試してみてください。この小さなスクリプトは、選択ボックスの値がその他の場合、選択ボックスの後にテキスト入力を作成します。その値が選択によって設定されたものを上書きするように、選択の同じ名前として新しいテキスト入力を入力します（他のものとして）
値がそれ以外の場合は、テキスト入力の存在を確認して削除します (選択値を上書きしません)。
HTML
<form>
<p>
<select>
<option value="text">text</option>
<option value="text">text</option>
<option value="text">text</option>
<option value="other">other</option>
</select>
</p>
<p>
<select>
<option value="text">text</option>
<option value="text">text</option>
<option value="text">text</option>
<option value="other">other</option>
</select>
</p>
</form>
jQuery
$(function() {
// bind all select on change
$('select').on('change', function() {
// if value is other
if ($(this).val() == 'other') {
// add a text input we match the name so that this input overwrite the select one as after in the form
$(this).after('<input type="text" name="' + $(this).attr('name') + '" class="otherInput" />');
} else {
if ($(this).next().is('input.otherInput')) {
$(this).next().remove();
};
};
});
});
jquery の「選択または編集」ソリューションを探していましたが、これはselect2 pluginの助けを借りて実行できることがわかりました。
私が望んでいたことを正確に行う非常に単純なソリューションであることが判明しました。
HTML:
<select name="otherselect" id="otherselect">
<option value="united-states">United States</option>
<option value="latvia" selected="selected">Latvia</option>
<option value="france">France</option>
</select>
JS:
$('#otherselect').select2({tags: true});
selected.jsをチェックしてみてください。ニーズに合うかもしれません。ゼロから何かを作るよりも簡単かもしれません。幸運を。