使用多选标签中的动态标识符填充下拉值答案

【问题标题】：Populating Drop-down Value using dynamic identifiers from Multiple Select tags使用多选标签中的动态标识符填充下拉值
【发布时间】：2013-07-03 18:04:15
【问题描述】：

我正在努力使用动态标识符动态获取下拉选择的值。我已经以静态方式完成了。任何人都可以建议我如何使每个“按钮”和“选择”标签的“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>

【问题讨论】：

标签： javascript jquery select drop-down-menu

【解决方案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());
       });
   });

【讨论】：

我觉得与其设置按钮的id，不如设置data-item和id 的选择标记与按钮的 data-item 值相同。

【解决方案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/

【讨论】：