Скопировать выделение из одного поля выбора во многие другие поля выбора с помощью jQuery? - PullRequest
Новая
       45

Скопировать выделение из одного поля выбора во многие другие поля выбора с помощью jQuery?

1 голос
/ 06 декабря 2011

У меня есть выбор в форме с кнопкой рядом с ним.Ниже приведено неизвестное количество других полей выбора. 

<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 получаетсбросить на невыбранное.

Что я делаю не так?

Кроме того, как я могу проверить, что для выбора установлено значение, и выкинуть alert(), если нет?

Большое, большое спасибо за ваше время:)

Ответы [ 3 ]

1 голос
/ 06 декабря 2011

Предполагая, что я правильно понял вопрос, и предполагая, что ваш HTML всегда следует этому макету, я бы предложил что-то вроде этого: 

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

Обратите внимание, что использование prev означает, что элемент select всегда должен непосредственно предшествовать элементу button.Я использовал селектор атрибута ", начинающийся с ", чтобы выбрать элементы select с классом, начинающимся с "offer _".

0 голосов
/ 06 декабря 2011

Не уверен, что не так с вашим исходным примером, это делает то, что я думаю, вы хотите сделать.То есть, когда кнопка нажата, выберите текущее значение из 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>

(я используюАтрибут data в <button> для связывания кнопки с <select> s, потому что атрибуты данных потрясающие, а синтаксический анализ строк класса CSS - нет.)

Обязательный пример jsFiddle .

0 голосов
/ 06 декабря 2011 
$(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>"
    );
  });
});
...