0

少し前に 、以前の選択に基づいてmysqlからjQueryドロップダウンにJSONデータを取得する方法を尋ねるこの質問を投稿しました

さて、ここの人々は素晴らしかったし、私は解決策を得ました。私が今抱えている問題は、提案されたソリューションが私の実稼働環境では機能しないが、私のテストでは機能するということです。

jQueryを使用しているエントリの重複を防ぐためにempty()、問題は、使用empty()すると最初のオプションを選択できないように見えることです。

これは、JSONからoptiosnを生成している関数です

function(data){

            var select = $('[name="employee_manager"]');
            select.empty();
            select.append(new Option(ucfirst('No Manager'),'100'));

            $.each(data, function(index, array) {

                    select.append(new Option(ucfirst(array['first_name'])+ " "+ucfirst(array['last_name']),array['id']));
            });

これは、選択を妨げないempty（）の代替手段ですか？

編集これは、動的に入力される項目が2つ未満の場合にのみ問題になるようです。
編集2これがHTMLです。empty()存在する場合、最初のオプションを選択できないようです

     <label for="manager">Reports To</label>
     <select name="employee_manager">
          <option value="1">Please Select Employee Role</option>
          <option value="2">John Doe</option>
          <option value="3">James Smith</option>
    </select>

編集3

空のクラスが私の選択にスパンを追加しているようです

<div class="selector">
<span style="-moz-user-select: none;">Jane  Smith</span>
    <select name="employee_manager" style="opacity: 0;">
         <option value="100">No Manager</option>
</select>
</div>

編集4
さて、ここに問題を示すjsfiddleがあります。JSONデータを正しくロードできませんでしたが、リストの最初の項目をクリックしようとすると、問題が発生する可能性があります。ユニフォームが削除されたかのようにユニフォームが 問題になっているようですhttp://jsfiddle.net/BandonRandon/xXUfp/1/

4

2 に答える 2

5

empty()ドロップダウンリストのオプションをクリアするために使用しないでください。DOMの子を削除するために使用する必要があるため、これは間違っています。

代わりに、次のようなコードを使用してください。

$("select[name='employee_manager'] > option").remove();

編集：jQueryuniformプラグインを使用する場合、オプションを動的に追加すると混乱します...プラグインを修正する必要がない1つの方法は、常に十分な「ダミー」オプションを配置することです（たとえば、最大の場合は20）オプションの量）次に、それらのオプションのテキスト/値を変更し、データに従って他のすべてを非表示にします。
適切なJSコードは次のようになります。

var myData = [];
myData.push( { text: "Please Select A Manager (JS)", value: "null" } );
myData.push( { text: "No Manager", value: "100" } );
myData.push( { text: ucfirst("a third choice"), value: "42" } );
$.each(data, function(index, array) {
   myData.push( { text: ucfirst(array['first_name'])+ " " + ucfirst(array['last_name']), value: array['id'] } );
});

$("select[name='employee_manager'] > option").each(function(index) {
   if (index < myData.length) {
      $(this).text(myData[index]["text"]);
      $(this).val(myData[index]["value"]);                          
      $(this).show();
   }
   else {
        $(this).hide();
   }
});

jsFiddleを更新しました。

原油ですが、機能しています.... :)

于 2011-03-20T08:27:56.300 に答える
0

このようなことを試してみてくださいが、保証はありません

$('<option></option>').val(100).html('No Manager').appendTo($(select));

$.each(data, function(index, array) {
    $('<option></option>').val(array['id']).html(ucfirst(array['first_name'])+ " "+ucfirst(array['last_name']).appendTo($(select));
});
于 2011-03-20T08:29:22.677 に答える