2016-08-25 18 views
0

テキストフィールドを取得することはできますが、属性を取得するためのかみそりの構文を使用すると、取得しようとすると未定義になりますdata-genre-id="@item.Id"から。mvcのひげそり構文のドロップダウンリストからIDを取得する5

$(".dropdown-menu li") 
       .on('click', 
        function() { 
          $(".dropdown-toggle").text($(this).text()); 
          var id = $(this).attr("data-genre-id"); 
          console.log(id); 
         }); 

...

<div class="dropdown"> 
     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
      Dropdown 
      <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 

      @foreach (var item in Model.Genres) 
      { 
      <li><a data-genre-id="@item.Id">@item.Name</a></li> 
      }   
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 

     </ul> 
    </div> 
+0

は、モデル - ビュー - コントローラタグはパターンに関する質問のためであることに注意してください。 ASP.NET-MVCの実装には特定のタグがあります。 –

+0

申し訳ありませんが、修正しました。 –

答えて

0

data-genre-id属性はそうあなたがa要素を検索し、データ・ジャンル-id属性を取得する必要がありますliをクリックすると、a要素なしliに属します。

は、このようにコードを変更

$(document).ready(function(){ 

    $(".dropdown-menu li").on('click',function() { 

     $(".dropdown-toggle").text($(this).text()); 

     var id = $(this).find("a").attr("data-genre-id"); 

     console.log(id); 
    }) 
}) 

決勝コード:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <div class="dropdown"> 
 
     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
      Dropdown 
 
      <span class="caret"></span> 
 
     </button> 
 
     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 

 
      @foreach (var item in Model.Genres) 
 
      { 
 
      <li><a data-genre-id="@item.Id">@item.Name</a></li> 
 
      }   
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 

 
     </ul> 
 
    </div> 
 
    
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script> 
 
$(document).ready(function(){ 
 
    
 
    $(".dropdown-menu li").on('click',function() { 
 
     
 
     $(".dropdown-toggle").text($(this).text()); 
 
     
 
     var id = $(this).find("a").attr("data-genre-id"); 
 
     
 
     console.log(id); 
 
    }) 
 
}) 
 
    </script> 
 
</body> 
 
</html>

+0

その1つを見ていない、ありがとう! –

関連する問題