使用 jQuery 将选择从一个选择字段复制到许多其他选择字段？

Question

我在表单中有一个选择，旁边有一个按钮。以下是数量未知的其他选择字段。

<select class="offer_1 value_source" name="xnamex">
    <option value="">Please Select</option>
    <option value="xxxxxxx">Text</option>
</select>
<button class="copy_select offer_1" type="button" name="Copy" value="">Copy Down</button>
<select class="offer_1" name="xnamex">
    <option value="">Please Select</option>
    <option value="xxxxxxx">Text</option>
</select>
<!-- unknown quantity of selects follow -->

我通过类 Offer_{number} 将选择字段和按钮分组在一起，

我想将所选值从类 value_source 的一个选择复制到具有相同类 (offer_{number}) 的所有其他选择。

这是我当前的代码：

$(document).ready(function() {
    $('.copy_select').click(function() {
        attr_class = $(this).attr('class');
        attr_class = attr_class.replace('copy_select ', '.');
        $(attr_class).val($(attr_class + ' value_source').val());
        alert(attr_class);
    });
});

所有选择均保持未选中状态，并且我的 copy_source 重置为未选中状态。

我做错了什么？

另外，我如何检查 select 是否设置了值，如果没有则抛出一个 alert() ？

非常非常感谢您的宝贵时间:)

Answer 1

假设我已经正确理解了这个问题，并且假设您的 HTML 始终遵循该布局，我会建议如下所示：

$(".copy_select").click(function() {
    $("select[class^='offer_']").val($(this).prev().val());
});

请注意，使用 prev 表示 select 元素必须始终直接位于 button 元素之前。我使用了“属性开头”选择器来选择 select 具有以“offer_”开头的类的元素。

Answer 2

不确定你原来的例子有什么问题，这就是我认为你想做的。也就是说，单击按钮时，从 offer_1 类的所有其他选择中的 select.offer_1.value_source 中选择当前值；而不是使用 offer_2 类进行选择，该类将由另一个按钮处理。

JavaScript

$('.copy_select').click(function() {
    $selects = $($(this).data('selects'));
    $source = $selects.filter('.value_source');
    $copies = $selects.not('.value_source');
    console.log($selects);
    console.log($source);
    console.log($copies);
    console.log($source.val());
    $copies.val($source.val());
})

HTML

<select class="offer_1 value_source" name="xnamex">
    <option value="">Please Select</option>
    <option value="a">Text</option>
    <option value="b">Foo</option>
    <option value="c">Bar</option>
</select>
<button class="copy_select" data-selects='.offer_1' type="button" name="Copy" value="">Copy Down</button>
<select class="offer_1" name="xnamex">
    <option value="">Please Select</option>
    <option value="a">Text</option>
    <option value="b">Foo</option>
    <option value="c">Bar</option>
</select>

（我在 上使用数据属性将按钮与 关联起来，因为数据属性非常棒并且可以解析 CSS 类字符串则不然。）

必需的 jsFiddle 示例。

Answer 3

$(document).ready(function() {
  $(".copy_select").click(function() {
    // store value
    var v =  $( ".value_source option:selected" ).val();
    // store text
    var t =  $( ".value_source option:selected" ).text();
    $("select[class^='offer_']").append(
         "<option value=\"" + v + "\">" + t + "</option>"
    );
  });
});