Question

我有多个下拉菜单，人们可以选择商店的营业时间，我需要让人们在第一个下拉菜单中输入值，然后点击复制所有日期;

基本上是onclick; 复制monfrom和monto中的选定值，并将值分配给其他下拉列表。

<select name="monfrom" id="monfrom">
<option value="00:30">00:30</option>
    <option value="01:30">01:30</option>
    <option value="02:30">02:30</option>
</select>
<select name="monto" id="monto">
 <option value="00:30">00:30</option>
    <option value="01:30">01:30</option>
    <option value="02:30">02:30</option>                     
</select>

<a href='#' onclick='JavascriptCode()'>Apply to all</a>

我希望有人可以提供帮助。

Answer 1

你可以使用普通的javascript：

来使用它

Javascript

function applyAll() {
    var monfrom = document.querySelectorAll('select[name$="from"]');
    var monto = document.querySelectorAll('select[name$="to"]');
    for (i = 0; i < monfrom.length; i++) {
        monfrom[i].value = monfrom[0].value;
    };
    for (i = 0; i < monto.length; i++) {
        monto[i].value = monto[0].value;
    };
};
window.onload = function () {
    var apply = document.getElementById('apply');
    apply.addEventListener('click', applyAll);
};

HTML

<select name="monfrom" id="monfrom">
    <option value="00:30">00:30</option>
    <option value="01:30">01:30</option>
    <option value="02:30">02:30</option>
</select>
<select name="monto" id="monto">
    <option value="00:30">00:30</option>
    <option value="01:30">01:30</option>
    <option value="02:30">02:30</option>
</select>
<button type="button" id="apply">Apply to all</button>

Demo

因为你似乎有jQuery，你可以使用它（虽然它不会更快）：

function applyAll() {
    var monfrom = $('select[name$="from"]');
    var monto = $('select[name$="to"]');
    monfrom.val(monfrom[0].value);
    monto.val(monto[0].value);
};
$(function () {
    $('#apply').on('click', applyAll);
});

下拉列表中的重复下拉值

1 个答案:

Demo