如何使用不同的按钮 ID select 下拉值

Question

我有四个列表和四个按钮。 我想为每个按钮分别自动选择每个列表。

 <select class="aa" required="" name="f1990" {input.multiple}="" {input.size}="" id="f1990" placeholder="" data-required="true"> <option value="897">Athens - 5 days / 4 nights - Total Tax: $132.44</option> <option value="896">Atlanta - 4 days / 3 nights - Total Tax: $99.75</option> <option value="895">Atlantic City - 4 days / 3 nights - Total Tax: $89.10</option> <option value="894">Bali - 8 days / 7 nights - Total Tax: $196.84</option> </select> <button id="1"> Redeem </button> <button id="2"> Redeem </button> <button id="3"> Redeem </button> <button id="4"> Redeem </button>

Answer 1

这个问题有一个巧妙的解决方案

 const select = document.querySelector('.aa') const buttons = document.querySelectorAll('button') buttons.forEach(button => button.addEventListener('click', handler)) let mapOptions = { "1": "897", "2": "896", "3": "895", "4": "894" } function handler(ev) { select.value = mapOptions[ev.target.id] }

 <select class="aa" required="" name="f1990" {input.multiple}="" {input.size}="" id="f1990" placeholder="" data-required="true"> <option value="897">Athens - 5 days / 4 nights - Total Tax: $132.44</option> <option value="896">Atlanta - 4 days / 3 nights - Total Tax: $99.75</option> <option value="895">Atlantic City - 4 days / 3 nights - Total Tax: $89.10</option> <option value="894">Bali - 8 days / 7 nights - Total Tax: $196.84</option> </select> <button id="1"> Redeem </button> <button id="2"> Redeem </button> <button id="3"> Redeem </button> <button id="4"> Redeem </button>

Answer 2

使用 value 属性来匹配选项和按钮。

 let cities = document.getElementById("f1990") document.querySelectorAll("button").forEach(b => b.addEventListener("click", function setRedeem(e) { cities.value = e.target.value }, false))

 <select class="aa" required="" name="f1990" {input.multiple}="" {input.size}="" id="f1990" placeholder="" data-required="true"> <option value="897">Athens - 5 days / 4 nights - Total Tax: $132.44</option> <option value="896">Atlanta - 4 days / 3 nights - Total Tax: $99.75</option> <option value="895">Atlantic City - 4 days / 3 nights - Total Tax: $89.10</option> <option value="894">Bali - 8 days / 7 nights - Total Tax: $196.84</option> </select> <button id="1" value="897"> Redeem </button> <button id="2" value="896"> Redeem </button> <button id="3" value="895"> Redeem </button> <button id="4" value="894"> Redeem </button>

Answer 3

如果按钮的索引与选项的索引匹配，则可以使用 selectedIndex 执行此操作（请参阅选项 1 - selectOptionByIndex）。

或者，将值属性添加到与选项值匹配的按钮（选项 2 - selectOptionByValue）。

演示https://stackblitz.com/edit/typescript-r4vuzj

document.querySelectorAll('button').forEach((item, index) => {
  item.addEventListener('click', event => {
    var value = item.getAttribute("value");
    selectOptionByIndex(index);  // option 1
    selectOptionByValue(value);  // option 2
  })
})

function selectOptionByIndex(index) {
  var select = (document.getElementById('mySelect')) as HTMLSelectElement;
  select.selectedIndex = index;
}

function selectOptionByValue(value) {
  var select = (document.getElementById('mySelect')) as HTMLSelectElement;
  select.value = value;
}

使用第二个选项 - select 按值 - 只需将相同的值属性添加到按钮，如下所示：

<select id="mySelect" class="aa" required="" name="f1990" {input.multiple}="" {input.size}="" id="f1990" placeholder="" data-required="true">
    <option value="897">Athens - 5 days / 4 nights - Total Tax: $132.44</option>
    <option value="896">Atlanta - 4 days / 3 nights - Total Tax: $99.75</option>
    <option value="895">Atlantic City - 4 days / 3 nights - Total Tax: $89.10</option>
    <option value="894">Bali - 8 days / 7 nights - Total Tax: $196.84</option>
</select>

<br>

<button id="1" value="897" name="btn"> Redeem </button>
<button id="2" value="896" name="btn"> Redeem </button>
<button id="3" value="895" name="btn"> Redeem </button>
<button id="4" value="894" name="btn"> Redeem </button>