jquery multiselect下拉列表复选框怎么动态添加option并赋值

Posted 2023-04-18

你可以在select控件的子节点上面绑定一个click的事件：

var optStr =“”;
//比如子节点是一个div
$("#select").find("div").click(function()
        //每次单击都获取选定值的数组 并拼接成逗号分割的字符串
        // 这样就不用每次都判断 选中或者取消的值是否在原字符串当中
        optStr = $.map($("#select").find("checkbox:checked").val(), function)              return $(this).val();         ).get().join(",");
);

一个大概的思路，希望对你有帮助。

参考技术A 你可以在select控件的子节点上面绑定一个click的事件：
var optStr =“”;//比如子节点是一个div$("#select").find("div").click(function() //每次单击都获取选定值的数组 并拼接成逗号分割的字符串 // 这样就不用每次都判断 选中或者取消的值是否在原字符串当中 optStr = $.map($("#select").find("checkbox:checked").val(), function) return $(this).val(); ).get().join(","););一个大概的思路，希望对你有帮助。

jQuery .next() 在表格中不起作用

【中文标题】jQuery .next() 在表格中不起作用

【英文标题】：jQuery .next() not working when in table

【发布时间】：2011-11-10 18:32:03

【问题描述】：

我有一组复选框，每个复选框都有一个与之关联的下拉菜单。当用户单击复选框时，复选框值及其下拉列表将发送到服务器。

我最初将每个都放在 ul 中，但将其更改为表格以保持下拉列表对齐。在我这样做之后，下一个功能停止工作。请求中的 var 甚至消失了。如果我硬编码一个值，它会显示备份。

函数如下：

$(document).delegate('.cbxAmenity', 'click', function() 
    $("#dialogNotify").append(" Saving...").dialog();

    var thisAmenity = (this.id).replace("AmenityList_", "");

    $.ajax(
        url: 'ajax_url.php',
        dataType: 'json',
        data: 
            ResortId: $("#id").val(),
            action: 'save',
            amenity: thisAmenity,
            locality: $(this).next().val() // if i change to 'foo' it works
        ,
        success: function() 
            $("#dialogNotify").dialog("close");
            ui.amenityDialog();
        ,
        error: function() 
            $("#dialogNotify").html("There was an error saving amenity");
        
    );

编辑：这是表格...它由另一个 ajax 调用生成：

$("#dialogAmenity").html("<table id='amenityList'><tr><th>Amenity</th><th>Locality</th></tr>");
                for(var index=0; index<amenities.length; index++) 
                    $("#amenityList").append("<tr><td><input type='checkbox' name='AmenityList_"+
                                             amenities[index].AmenitiesID + "' id='AmenityList_"+
                                             amenities[index].AmenitiesID + "' class='cbxAmenity' /> "+
                                             amenities[index].Name +
                                             "</td><td><select id='locality' name='locality'>"+
                                             "<option value='RESORT'>Resort</option>" +
                                             "<option value='NEARBY'>Near by</option>" + 
                                             "</select></td></tr>");

                    if (amenities[index].link == true)
                        $("#AmenityList_"+amenities[index].AmenitiesID).prop('checked', true);

                
                $("#dialogAmenity").append("</table>");

再次编辑：这是 Firebug 的 html

<table id="amenityList">
  <tbody>
    <tr>
      <th>Amenity</th>
      <th>Locality</th>
    </tr>
    <tr>
      <td>
        <input name="AmenityList_1" id="AmenityList_1" class="cbxAmenity" type="checkbox"> Indoor Pool
      </td>
      <td>
        <select id="locality" name="locality">
          <option value="RESORT">Resort</option>
          <option value="NEARBY">Near by</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input name="AmenityList_2" id="AmenityList_2" class="cbxAmenity" type="checkbox"> Fitness Gym
      </td>
      <td>
        <select id="locality" name="locality">
          <option value="RESORT">Resort</option>
          <option value="NEARBY">Near by</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input name="AmenityList_3" id="AmenityList_3" class="cbxAmenity" type="checkbox"> Beach Access
      </td>
      <td>
        <select id="locality" name="locality">
          <option value="RESORT">Resort</option>
          <option value="NEARBY">Near by</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input name="AmenityList_4" id="AmenityList_4" class="cbxAmenity" type="checkbox"> Laundry Room
      </td>
      <td>
        <select id="locality" name="locality">
          <option value="RESORT">Resort</option>
          <option value="NEARBY">Near by</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

【问题讨论】：

你能发布table的html吗？

这是一个创建表格的脚本。你能展示一个最终创建的表格的例子吗？

@greg，刚刚又更新了表格代码

【参考方案1】：

cbxAminity 类的元素是<td> 标记中的最后一个元素。因此，它没有next() 元素。你需要做的

$(this).parent().next().find('select').val();

为了在下一个<td>中找到<select>元素。

【讨论】：

做到了。我想知道在 td 容器内是否有影响，但不知道如何摆脱它，哈哈……谢谢

+1 有趣的是，在我回答这个问题之前，我看到另一个问题与相同的问题。

【参考方案2】：

您的表创建脚本包含一个缺陷。你不能以这种方式附加结束标签$(...).append("</table>")。

  var html = "<table id='amenityList'><tr><th>Amenity</th><th>Locality</th></tr>");
  for(var index=0; index<amenities.length; index++) 
     html += "<tr><td><input type='checkbox' name='AmenityList_"+
             amenities[index].AmenitiesID + "' id='AmenityList_"+
             amenities[index].AmenitiesID + "' class='cbxAmenity'" +

             (amenities[index].link == true ? "checked='checked'" : "") + 

             "/> "+
             amenities[index].Name +
             "</td><td><select id='locality' name='locality'>"+
             "<option value='RESORT'>Resort</option>" +
             "<option value='NEARBY'>Near by</option>" + 
             "</select></td></tr>");

   
   html += "</table>";
   $("#dialogAmenity").html(html);

【讨论】：

当我添加 $firebug 时有这样的说法：$(this.id).replace 不是函数url 第 374 行

@guyfromfl 我明白了。别介意我的第一个建议，删除这些括号，因为它们已经过时了。相反，请查看我建议的表格生成代码。

已将其更改为您的建议，但仍然没有创建该 var。

保留建议的更改，因为它需要正常运行。你能显示元素.cbxAminity的HTML吗？

是的，确实保留了更改，因为它更有意义..一些浏览器假定关闭标签等...会将 .cbxAminity 编辑到我的 OP