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 -->

我通过class offer_ {number}

将选择字段和按钮组合在一起

我想将选择的值从使用类value_source的一个select复制到具有相同类的所有其他选择（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元素之前。我使用了“attribute starts-with”选择器来选择select元素，其类别以“offer _”开头。

Answer 2

$(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>"
    );
  });
});

Answer 3

不确定原始示例有什么问题，这就是我认为您想要做的事情。也就是说，单击该按钮时，从所有其他选项select.offer_1.value_source中选择当前值offer_1;而不是选择使用另一个按钮处理的类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>

（我在<button>上使用数据属性将按钮与<select>相关联，因为数据属性非常棒，而且CSS类字符串不是解析的。）

Obligatory jsFiddle example

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

3 个答案:

的JavaScript

HTML