Question

I would like to set a dropdown value based on what is set in another dropdown.

window.onload=function() { 
  document.getElementById("tmcp_select_1").onchange=function() {
    document.getElementById("tmcp_select_75").value=this.options[this.selectedIndex].getAttribute("value"); 
  }
  document.getElementById("tmcp_select_1").onchange(); // trigger when loading MYGGNAT

  document.getElementById("tmcp_select_2").onchange=function() {
    document.getElementById("tmcp_select_76").value=this.options[this.selectedIndex].getAttribute("value"); 
  }
  document.getElementById("tmcp_select_2").onchange(); // trigger when loading MYGGNAT
}

This is the code I tried, and it worked :). There is a problem however. On this link you can see the first dropdown menu under heading "Bredd", whatever is set there sets the value of the same looking dropdown menu at the bottom. But for every selection on the that dropdown there is a new one beside it (under heading "Höjd") so if "Bredd" dropdown is "5 (480 mm)" and you change the "Höjd" dropdown - that one will work as well. However if you change the first dropdown "Bredd" to anything else there will be a new "Höjd" with a different element ID and name - thus if you change "Höjd" after changed "Bredd" to anything other than standard 5 (480 mm) the "Höjd" will not change its corresponding dropdown at the bottom.

When I tried to add this to the code above it did not work (I guess because its conflicting with rows above):

  document.getElementById("tmcp_select_3").onchange=function() {
    document.getElementById("tmcp_select_76").value=this.options[this.selectedIndex].getAttribute("value"); 
  }
  document.getElementById("tmcp_select_3").onchange(); // trigger when loading MYGGNAT
}

I can imaging instead to get elements CSS selector syntax might work? To get value of the dropdown in that place rather than by its ID or name. Or if it could look for element and if not found try the next one? So if it can't find tmpc_select_2, try tmpc_select_3, etc.

EDIT: just realised that the bottom two dropdowns: if bottom "Bredd" changes the bottom "Höjd" should change as well (to an identical one but different underlying values/price)

Answer 1

我只是尝试了你的方法，它正在为这两个选择工作。你能检查一下我的代码吗？

＆＃13;

<!doctype html>
<html>

<head>
</head>
<title>Test Javascript</title>
<h1>Test JS</h1>

<body>
    <label>Select 1</label>
    <select id="select1">\
        <option value="10">10 mm</option>
        <option value="11">11 mm</option>
        <option value="12">12 mm</option>
        <option value="13">13 mm</option>
        <option value="14">14 mm</option>
        <option value="15">15 mm</option>
    </select>
    <label>Select 2</label>
    <select id="select2">\
        <option value="20">20 mm</option>
        <option value="21">21 mm</option>
        <option value="22">22 mm</option>
        <option value="23">23 mm</option>
        <option value="24">24 mm</option>
        <option value="25">25 mm</option>
    </select>
    <label>Select 1 Dup</label>
    <select id="select1_dup">\
        <option value="10">10 mm</option>
        <option value="11">11 mm</option>
        <option value="12">12 mm</option>
        <option value="13">13 mm</option>
        <option value="14">14 mm</option>
        <option value="15">15 mm</option>
    </select>
    <label>Select 2 Dup</label>
    <select id="select2_dup">\
        <option value="20">20 mm</option>
        <option value="21">21 mm</option>
        <option value="22">22 mm</option>
        <option value="23">23 mm</option>
        <option value="24">24 mm</option>
        <option value="25">25 mm</option>
    </select>
    <script type="text/javascript">
    document.getElementById("select1").onchange = function() {
    	console.log("select 1", this.options[this.selectedIndex]);
        document.getElementById("select1_dup").value = this.options[this.selectedIndex].getAttribute("value");
    };

    document.getElementById("select2").onchange = function() {
    	console.log("select 2", this.selectedIndex);
        document.getElementById("select2_dup").value = this.options[this.selectedIndex].getAttribute("value");
    };
    </script>
</body>

</html>

＆＃13;

我不认为 document.getElementById（＆＃34; tmcp_select_1＆＃34;）。onchange（）; 是必需的。

Getting and setting values of dropdown menu with Javascript

1 个答案: