1

現在、javascriptとJQueryを使用してカスタムコントロールを構築しており、次の関数があります。

$(document).ready(function() {
    $('select').each(function() {
        var parent = this;
        $('#comboBoxData li').on('click', 'li', function() {
            alert('found');
            var value = $(this).prop('id');
            alert(value);
            $(parent).val(value);
        });
    });
});

マークアップは次のとおりです。

<select style="display:none">
    <option value='1'>1</option>
    <option vlaue='2'>2</option>
</select>
<ul id="comboBoxData">
    <li id='1'>1</li>
    <li id='2'>2</li>
</ul>

'#comboBoxData li'要素をクリックすると、要素のID属性を使用して親入力からオプションを選択する必要があります。'value'変数に正しいデータが入力されており、関数自体に到達しているが、何らかの理由でオプションが選択されていないことを確認しました。何が問題になっていますか？

4

6 に答える 6

2

以下のコードを試してみてください。動作することがわかります。

$('#comboBoxData li').each(function () {
          $(this).bind('click', function () {
          var value = $(this).prop('id');
          $(this).parent().prev("select").val(value);
     });
});

http://jsfiddle.net/quAQm/9/

于 2012-05-21T10:49:04.587 に答える
1

私はあなたのコードを見ていて、これの私のバージョンを投稿すると思いました。

見た目では、selectこの拡張機能を暗示する複数のリストが必要です。また、これは拡張機能であるため、ulオンザフライで生成する必要があると思います。コードとデモは次のとおりです。

$('.selectEnhance').each(function (){

    // Setup
    $selectElement = $(this);
    $selectElement.css("display","none");

    // Build the list
    var $listEnhancement = $(buildListEnhancement($(this)));

    // Attach events
    $listEnhancement.find('li').click({selectElement: $selectElement}, function(event){
       event.data.selectElement.val($(this).text());
    });

    // Insert into DOM
    $(this).after($listEnhancement);
});

アイテムulから構築するための基本的な機能：select

function buildListEnhancement(selectElement)
{
          var listElements = "";
          selectElement.find('option').each(
            function(){
                   listElements += "<li>" + $(this).val() + "</li>";
            });

        return "<ul>" + listElements + "</ul>";
}

selectこれで、拡張する要素にクラス名を簡単に付けることができます（ class="selectEnhance"）

これが実際の例です。

于 2012-05-21T12:14:08.617 に答える
0

JamesAllardiceとJamieDixonに特に感謝します。次のマークアップで問題が修正されました。

$('#comboBoxData').on('click', 'li', function() {
    var value = $(this).prop('id');
    $(parent).val(value);
});
于 2012-05-21T11:57:15.253 に答える
0

HTMLの例のコンボボックスは、の親要素ではありません<ul>。prev()前の兄弟（この場合は選択ボックス）に戻るには、jQueryのメソッドを使用する必要があります。

$('#comboBoxData li').bind('click', function () {                         
   var value = $(this).prop('id');                         
   $(this).parent().prev().val(value);    
});

編集：

クリックイベントをそれぞれにバインドすることを忘れたため、最初にセレクターliが必要であり、次にコンボボックスに到達するためのセレクターが必要です。parent()prev()

于 2012-05-21T10:37:00.207 に答える
0

おそらくあなたのparent認識コードは間違っています。これは私のために働きます：

$('#comboBoxData li').click(function () {
   var value = $(this).prop('id');
   $(this).parent().prev().val(value);
});

http://jsfiddle.net/6PJdU/

于 2012-05-21T10:38:37.193 に答える
0

私はjQueryの専門家ではありませんが、ロジックが少し間違っているように見えます。私の頭のてっぺんから（属性セレクターをチェックする必要があり、これはそれを複雑にしすぎているかもしれません）これはあなたが進歩するのを助けるかもしれません...

$("#comboBoxData li").on("click", function(e) {
  var value = $(this).attr("id");
  var option = $(parent).find("option[value='" + value + "']");
  option.attr("selected", "selected");
});

ここでの重要なポイントの1つは、必ずしも問題に直接関係しているわけではありませんが、要素の「セット」にバインドでき、個々の要素を同じイベントにバインドするためにこれらの各要素をループする必要がないことです。重要なのは、私がやっていることは、select要素のをselected指定するのではなく、オプションの属性を明示的に指定することだと思います。val

于 2012-05-21T10:40:33.140 に答える