3 に答える
コメントで、DropkickまたはjQueryUIMultiSelectウィジェットを使用しようとしていると言います。これは複数選択のドロップダウンではないので、Dropkickがあなたが望むものになると思います。
これは、コードがDropdkickで機能しないことを示すjsfiddleです。
私の理解では、通常のイベントバインディングはDropkickでは機能しません。代わりに、次のようなドロップキックコールバックを使用する必要があります。
$('select').dropkick({
change: function(value, label) {
alert('You picked: ' + label + ':' + value);
}
});
また、「変更」コールバックのみが使用可能であるようです。「フォーカス」コールバックはサポートされていないようです。
さらなる問題は、Dropkick選択のオプションを変更する方法がないように見えることです。（jsfiddleでコードを試しましたが、値は「0」になりました。）
「change」コールバックの使用に制限されても問題がない場合、オプション値を変更できないという事実の回避策は、どの値にも「_default」を含めないことです。代わりに、フォームに非表示のフィールドを含めます。dbの値が「_default」で終わる場合、非表示フィールドは「true」に設定されます。それ以外の場合は「false」に設定されます。ドロップキック選択の「変更」コールバックは、非表示の値を「false」に設定します。フォームが投稿されると、サーバーは非表示の値が「true」であるかどうかを確認し、投稿された選択値の最後に「_default」を追加します。
アップデート：
非表示フィールドを実装した場合、ページを表示するコードは次のようになります。
<script>
$(function() {
$('select').dropkick({
change: function() {
$('input[name=isDefaultPriceSelected]').val('false');
}
});
});
</script>
<?php
// Helper method that tells if the given string ends with the given substring.
function endsWith($str, $substr) {
$substrLength = strlen($substr);
return substr_compare($str, $substr, -substrLength, substrLength) === 0;
}
// Helper method that prints out a hidden input element.
function printHiddenInput($name, $value) {
echo '<input type="hidden" name="' . $name . '" value="' . $value . '" />
}
?>
<select name="jeans">
<?php
$options = array("Null"=>"", "$0"=>"$0", "$50"=>"$50", "$100"=>"$100", "$150"=>"$150");
echo printSelectOptions($options, $row_default['jeans']);
?>
</select>
<?php
echo printHiddenInput('isDefaultPriceSelected', endsWith($row['jeans'], '_default') ? 'true' : 'false');
?>
フォームの投稿を処理するコードを処理する必要があります。選択値と非表示値の両方を探す必要があります。非表示の値が「true」の場合、投稿された選択値の最後に「_default」を追加する必要があります。
replaceKey()注：ヘルパー関数は使用しなくなります。:(
これは以前から気付いていたはずですが、 への呼び出し$('select').focusはドキュメント対応のハンドラーではなく、<select>が DOM に追加される前に行われます。したがって、にバインドされていません<select>。
試す：
<script>
$(function() {
$('select').focus(function () {
var option = $(this).find("option[value*=default]");
option.attr('value', option.attr('value').replace(/_default/g, ''));
});
});
</script>
使ってみましたか
$(document).on('focus', 'select', function() {
//code here
});