使用来自多个选择标签的动态标识符填充下拉值

Question

我正在使用动态标识符来动态地获取下拉选择的值。 我已经以静态方式完成了。 有人可以建议我如何使每个“按钮”和“选择”标签的“ id”动态化，单击每个“ GO”按钮后，该值应该从同一行的选择下拉列表中显示。 提前致谢。

=================

$(".button").click(function() {               
              var dataItem = $(this).data('item'),
              contentID = $('#'+dataItem);
              $('#output').html(contentID.val())
          });


=============

<table cellspacing="10" cellpading="10" border="0">
        <tr>
            <td>Application Name</td>
            <td>
                <select id="country">
                    <option>Select Any Country</option>
                    <option value="India">India</option>
                    <option value="Australia">Australia</option>
                    <option value="England">England</option>
                    <option value="Singapore">Singapore</option>
                    <option value="Canada">Canada</option>
                </select>
            </td>
            <td><input type="button" data-item="country" class="button" value="Go" /></td>
        </tr>
         <tr>
            <td>Application Name</td>
            <td>
                <select id="country1">
                    <option>Select Any Country</option>
                    <option>China</option>
                    <option>Russia</option>
                    <option>France</option>
                    <option>Paris</option>
                    <option>Germany</option>
                </select>
            </td>
            <td><input type="button" data-item="country1" class="button" value="Go" /></td>
        </tr>
         <tr>
            <td>Application Name</td>
            <td>
                <select id="country2">
                    <option>Select Any Country</option>
                    <option>Sri Lanka</option>
                    <option>South Africa</option>
                    <option>Ireland</option>
                    <option>Spain</option>
                    <option>Serbia</option>
                </select>
            </td>
            <td><input type="button" data-item="country2" class="button" value="Go" /></td>
        </tr>
    </table>
    <div id="output" style="color:red"></div>

Answer 1

为选择和按钮分配动态“ id”

  var n =1;
   $("table tr input.button").each(function(n){
      $(this).attr("id" , "button"+n);
      $(this).parent().find("select").attr("id" , "country"+n);
   });

现在点击

  var y =1;
  $("table tr input.button").each(function(y){
      $("#button"+y).live('click', function(){
         alert($("#country"+y+" option:selected").index());
       });
   });

Answer 2

我希望这是你期望的...尝试

$("table tr td").each(function(n){
     var id = $(this).find("select").attr("id");
     if(id)
        $("#output").append($("#"+id+" :selected").val()+"<br>");
   });
}

检查小提琴： http : //jsfiddle.net/tamilmani/QrbWy/