Getting one select element to affect another

Question

I recently posted a related question copying selected option to another select.

I realised that what I'm trying to do is more straightforward but I hope I'm not breaking forum rules by "double posting" because this question is slightly different. Here goes. I want "productchoice" to affect "productchoice2".

 <select id="productchoice">
   <option value="1">Option #1</option>
   <option value="2">Option #2</option>
  </select>

  <select id="productchoice2">
   <option value="1">Option #1</option>
   <option value="2">Option #2</option>
  </select>

My question is: when "productchoice" is changed, what javascript should I put in to make "productchoice2" reflect the same choice?

Thanks for your help again, kind people!

jQuery is good for me. I tried using function explode() { $("#productchoice2").val($("#productchoice").val()); }; And I put onchange into it. Didn't work. — Edmond Tam, May 20 '13 at 15:40

Gabe · Accepted Answer · 2013-05-20T15:47:55.853

2

HTML

<select id="productchoice" onchange="productchoicechange()">
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>
</select>
<select id="productchoice2">
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>
</select>

JS

jsfiddle by index

// by index
function productchoicechange(){
    var productchoice = document.getElementById("productchoice");
    var productchoice2 = document.getElementById("productchoice2");
    productchoice2.options[productchoice.options.selectedIndex].selected = true;
}

jsfiddle by value

// by value
function productchoicechange(){
    var productchoice = document.getElementById("productchoice");
    var productchoice2 = document.getElementById("productchoice2");
    productchoice2.value = productchoice.value;
}

edited May 20 '13 at 15:47

answered May 20 '13 at 15:42

Gabe

49,577
28
142
181

when I try going by value I get a blank option on productchoice2 – Edmond Tam May 20 '13 at 15:50
Take a look at the example jsfiddle for it, it works. So there must be something either different with your code or markup. http://jsfiddle.net/jppWa/ – Gabe May 20 '13 at 15:51
1

thanks, doesn't work on the website designer I'm using, but works on Dreamweaver and jsfiddle. Will try to figure it out! – Edmond Tam May 20 '13 at 15:53
I got resource interpreted as script but transferred with mime type text/plain on chrome console, do you have any idea why? – Edmond Tam May 20 '13 at 16:02
This may help you, but it sounds like the server is serving up the content with the incorrect mime. http://stackoverflow.com/questions/3467404/chrome-says-resource-interpreted-as-script-but-transferred-with-mime-type-text – Gabe May 20 '13 at 16:11

MikeB · Answer 2 · 2013-05-20T15:52:16.373

1

if you'd like to use jQuery

   $('#productchoice').change(function (){

        $('#productchoice2').val($(this).val());

   });

JSFiddle

edited May 20 '13 at 15:52

answered May 20 '13 at 15:38

MikeB

2,402
1
15
24

score 1 · Answer 3 · answered May 20 '13 at 15:42

Using pure JS you can do this:

var select_element = document.getElementById('productchoice');

select_element.onchange = function(e){
    document.getElementById('productchoice2').value = this.options[this.selectedIndex].value;
}

Demo: http://jsfiddle.net/tymeJV/Zayq4/

score 0 · Answer 4 · answered May 20 '13 at 16:02

Try using angularJS

JSFiddle:-http://jsfiddle.net/adiioo7/xUPZv/

HTML:-

<html ng-app>     
    <body>
        <select id="productchoice"  ng-model="selection">
            <option value="1">Option #1</option>
            <option value="2">Option #2</option>
        </select>
        <select id="productchoice2" ng-model="selection">
            <option value="1">Option #1</option>
            <option value="2">Option #2</option>
        </select>
    </body>
</html>

Getting one select element to affect another

4 Answers4

Try using angularJS