與前綴

Question

jQuery選擇這是我的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> 

所以，我渲染的局部視圖來顯示更多的項目，我有一個動作，以創造更多的。 我試圖調用一個Json函數，當我更改第一個DropDownList中的值以重新填充第二個時。 這是我的腳本：UPDATE

   <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行動不會被調用。爲了工作，我必須在劇本中改變什麼？謝謝！

Answer 1

不知道這是唯一的問題，但我認爲你正在構建的選擇器不是你的意思。

.editRow.Grupa 

將匹配的元素與類editRow和類.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>"); 

        }); 

       }); 
      }); 
      }); 

我沒有測試過這一點，但是這是你需要的東西去的總體思路。請注意，我使用的選擇器效率非常低，如果您可以更改生成的代碼以便您的選擇框具有已知的類，則代碼將更加整潔，並且更有效

Answer 2

除非我只是想念它$('.editRow.Grupa')似乎不匹配您的HTML中的任何東西。這表示查找所有元素的類別爲editRow和Grupa。你沒有一類Grupa的元素。

見選擇這個列表中選擇項目的有效方法：如果你將其更改爲$('.editRow .Grupa')，並添加一個類你GRUPA選擇是Grupa

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

你的選擇是密切。

這就是說，得到一個元素的類內editRow和類Grupa的所有元素。您的選擇器表示您想要所有具有類editRow和Grupa的元素。