单选按钮如何改变JS中下拉列表的<option>？

Question

我的目标是让单选按钮更改 <select> 元素（下拉列表）的 <option>。

我已经能够解决相反的行为（选择另一个 <option> 会导致单选按钮发生变化）。正如你在这里看到的：

function validate()
{
 var x = document.getElementById("location_select");
 var y = x.options[x.selectedIndex].value;
   {
    document.getElementById(y).checked = true;
   }
}

<select id="location_select" onchange="validate()">
  <option value="berlin">Berlin</option>
  <option value="paris">Paris</option>
</select>

<label>
  <input type="radio" id="berlin" name="location">
  <span>Berlin</span>
</label>

<label>
  <input type="radio" id="paris" name="location">
  <span>Paris</span>
</label>

现在我想生成相反的行为。期望的行为：更改单选按钮也会更改我选择的 <option>。

单选按钮 ID 与我的下拉选项的“值”相同。因此 JS 变量可以用于 ID 以及“值”。

基本上，这是我目前的进度：

function validate_2()
{
   {
     document.getElementById("location_select").selectedIndex = "1";
   }
}

<label>
  <input type="radio" id="berlin" name="location" onchange="validate_2()">
  <span class="title">Berlin</span>
</label>

<label>
  <input type="radio" id="paris" name="location" onchange="validate_2()">
  <span class="title">Paris</span>
</label>

<select id="location_select">
  <option value="berlin">Berlin</option>
  <option value="paris">Paris</option>
</select>

如您所见，到目前为止它只是静态的。
如果这不是一个好方法，我愿意接受更好的方法。

Answer 1

function validate_2(city)
{
   
     document.getElementById("location_select").value = city;
   
}

function validate_1(){
  

    radio = document.getElementsByTagName('input')
    
    if(radio[0].checked)radio[1].checked = true
    else if (radio[1].checked)radio[0].checked = true
    


}

<label>
  <input type="radio" id="berlin" name="location" onchange="validate_2('berlin')" checked>
  <span class="title">Berlin</span>
</label>

<label>
  <input type="radio" id="paris" name="location" onchange="validate_2('paris')">
  <span class="title">Paris</span>
</label>

<select id="location_select" onChange="validate_1()">
  <option value="berlin">Berlin</option>
  <option value="paris">Paris</option>
</select>

Answer 2

此函数可以通过更改 radio 输入来更改 <select> 的选定选项

获取已更改的无线电输入的 id 并设置 <select> 标签的 value 属性

版本 1

function validate_2() {
    checkedVal = event.target.id;
    locationSelect = document.getElementById("location_select");
        
    locationSelect.value = checkedVal;
}

版本 2

可以缩短为

function validate_2() {
    // ID becomes variable in JS
    location_select.value = event.target.id;
}

版本 3

明确使用selectedIndex

function validate_2() {
    checkedVal = event.target.id;
    locationSelect = document.getElementById("location_select"); 
    indexToSelect = Array.from(locationSelect.options).findIndex(opt => opt.value == checkedVal);
    locationSelect.selectedIndex = indexToSelect;
}

单选按钮如何改变JS中下拉列表的<option>？

How can a radio button change an <option> of a drop-down list in JS?

html

javascript

html-select

selectedindex

radio-button

版本 1

版本 2

版本 3