プレフィックスを備えたjQueryセレクター

StackOverflow https://stackoverflow.com/questions/6388992

質問

これは私のHTMLコードです：

<div id="editorRows">
  <div class="editorRow">
     <input type="hidden" value="01c4ed6d-1234-4951-b048-d86208636479" autocomplete="off" name="comds.index">
     Grupa:
     <select id="comds_01c4ed6d-1234-4951-b048-d86208636479__Grupa" name="comds[01c4ed6d-1234-4951-b048-d86208636479].Grupa">
     Produsul:
     <select id="comds_01c4ed6d-1234-4951-b048-d86208636479__Produs" name="comds[01c4ed6d-1234-4951-b048-d86208636479].Produs">
     Cantitate:
     <input id="comds_01c4ed6d-1234-4951-b048-d86208636479__Cantitate" type="text" value="0" name="comds[01c4ed6d-1234-4951-b048-d86208636479].Cantitate" data-val-required="The Cantitate field is required." data-val-number="The field Cantitate must be a number." data-val="true">
      Pret:
      <input id="comds_01c4ed6d-1234-4951-b048-d86208636479__Pret" type="text" value="17.23" size="4" name="comds[01c4ed6d-1234-4951-b048-d86208636479].Pret" data-val-required="The Pret field is required." data-val-number="The field Pret must be a number." data-val="true">
      TVA:
      <input id="comds_01c4ed6d-1234-4951-b048-d86208636479__TVA" type="text" value="0.24" name="comds[01c4ed6d-1234-4951-b048-d86208636479].TVA" data-val-required="The TVA field is required." data-val-number="The field TVA must be a number." data-val="true">
      Total:
      <input id="comds_01c4ed6d-1234-4951-b048-d86208636479__Total" type="text" value="0" name="comds[01c4ed6d-1234-4951-b048-d86208636479].Total" data-val-required="The Total field is required." data-val-number="The field Total must be a number." data-val="true">
      <a class="deleteRow" href="#">Sterge</a>
    </div>

    <div class="editorRow">
        <input type="hidden" value="97b4ac65-73f8-4339-a707-bad53763fb2e" autocomplete="off" name="comds.index">
        Grupa:
        <select id="comds_97b4ac65-73f8-4339-a707-bad53763fb2e__Grupa" name="comds[97b4ac65-73f8-4339-a707-bad53763fb2e].Grupa">
        Produsul:
        <select id="comds_97b4ac65-73f8-4339-a707-bad53763fb2e__Produs" name="comds[97b4ac65-73f8-4339-a707-bad53763fb2e].Produs">
        Cantitate:
        <input id="comds_97b4ac65-73f8-4339-a707-bad53763fb2e__Cantitate" type="text" value="0" name="comds[97b4ac65-73f8-4339-a707-bad53763fb2e].Cantitate">
        Pret:
        <input id="comds_97b4ac65-73f8-4339-a707-bad53763fb2e__Pret" type="text" value="17.23" size="4" name="comds[97b4ac65-73f8-4339-a707-bad53763fb2e].Pret">
        TVA:
        <input id="comds_97b4ac65-73f8-4339-a707-bad53763fb2e__TVA" type="text" value="0.24" name="comds[97b4ac65-73f8-4339-a707-bad53763fb2e].TVA">
        Total:
        <input id="comds_97b4ac65-73f8-4339-a707-bad53763fb2e__Total" type="text" value="0" name="comds[97b4ac65-73f8-4339-a707-bad53763fb2e].Total">
        <a class="deleteRow" href="#">Sterge</a>
      </div>
   <div class="editorRow">.....
</div>

だから、私はより多くのアイテムを表示するために部分的な見解をレンダリングしており、より多くを作成するためのアクションがあります。最初のドロップダウンリストの値を変更して2番目のものを再駐留させるときに、JSON関数を呼び出そうとしています。これは私のスクリプトです： アップデート

             <script type="text/javascript">
            $(document).ready(function () {
            $('name$=.Grupa').change(function () {

                var url = '<%= Url.Content("~/") %>' + "Comenzi/ForProduse";
                var ddlsource = $(this);
                var ddltarget = $(this).siblings('[name$=.Produs]:first');
                $.getJSON(url, { id: $(ddlsource).val() }, function (data) {
                    $(ddltarget).empty();
                    $.each(data, function (index, optionData) {
                        $(ddltarget).append("<option value='" + optionData.Value + "'>" + optionData.Text + "</option>");
                        });

                    });
                });
            });
       </script>

コントローラーからの私のJSONアクションは呼び出されていません。作業するには、スクリプトで何を変更する必要がありますか？ありがとう！

役に立ちましたか？

解決

これが唯一の問題であるかどうかはわかりませんが、あなたが構築しているセレクターはあなたが作るつもりのものではないと思います。

.editRow.Grupa

要素をクラスの編集とクラス.grupaと一致させます

私はこの線だと思います：

var ddlsource = '.editRow.Grupa';

おそらくそうあるべきです $(this);
そしてあなたの var ddlsource = '.editRow.Grupa';

のようなものでなければなりません var target = $(this).siblings('[name$=.Produs]:first');

そして、これらのいずれか： $(ddltarget) 代わりにターゲットにする必要があります。

このようなsoemthing： 

$(document).ready(function () {
         $('[name$=.Grupa]').change(function () {   //targets things with the name ending in .Grupa

            var url = '<%= Url.Content("~/") %>' + "Comenzi/ForProduse";
            var source =$(this); //this will be which ever one is changed
            var target = $(this).siblings('[name$=.Produs]:first');  //this SHOULD find the first select with a name ending in .Produs that is the sibling (same level in the dom to the changed select)
            $.getJSON(url, { id: source.val() }, function (data) {
                      target.empty();
                      $.each(data, function (index, optionData) {
                      target.append("<option value='" + optionData.Value + "'>" + optionData.Text + "</option>");

                  });

               });
            });
          });

私はこれをテストしていませんが、それはあなたが何をする必要があるかについての一般的な考えです。ご注意ください、私が使用しているセレクターは非常に非効率的です。生成されたコードを変更して、選択したボックスに既知のクラスがあるように、それははるかにきちんとしたコードになり、より効果的です

他のヒント

私がそれを見逃していない限り $('.editRow.Grupa') HTMLで何も一致していないようです。これは、クラスのあるすべての要素を見つけると言っています editRow と Grupa. 。クラスの要素はありません Grupa.

アイテムを選択する有効な方法については、このセレクターのリストを参照してください。

http://api.jquery.com/category/selectors/

あなたがそれを変更すると、あなたのセレクターは近くにあります $('.editRow .Grupa') そして、あなたのgrupaにクラスを追加しますselect Grupa.

これが言っているのは、のクラスがある要素の内側にあるすべての要素を取得することです editRow のクラスがあります Grupa. 。あなたのセレクターは、両方のクラスを持っているすべての要素が必要だと言います editRow と Grupa.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top