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

Question

我的目标是使无线电按钮更改＆lt; select＆gt; element（下拉列表）的＆lt; 。

我已经能够解决反向行为（选择另一个＆lt; option＆gt; 会导致单选按钮的更改）。正如您在这里看到的那样：

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>

现在，我想生成反向行为。 所需的行为：更改无线电按钮还会在我的选择中更改＆lt; 。

单选按钮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>

As you can see, it's only static so far.
I'm open to better methods if this isn't a good one.

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

此功能可以通过更改 doady 输入

获取无线电输入的 ID ，可以更改＆lt; select 的选定选项，该选项已更改并设置 id > value ＆lt; select＆gt; 标签

版本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;
}