Selecting an option from one drop down populates o

2019-03-02 22:57发布

问题:

I am trying to figure out how to populate other tags with a specific text after selecting from a drop down.

So if the drop down and another drop down below it the following should happen. When you choose "A" from dropDown1, dropDown2 should populate with "You chose A". If you choose "B" dropDown2 should say "You chose B". Same goes for "C"

Here is a sample code below.

<html>
<body>
<form>

 <select id="dropDown1">
    <option value = "A">A</option>
    <option value = "B">B</option>
    <option value = "C">C</option>
 </select>

<select id="dropDown2">
    <option value="You chose A">You chose A</option>
    <option value="You chose B">You chose B</option>
    <option value="You chose C">You chose C</option>
</select>
</form>

</body>

</html>

Any help would be greatly appreciated. If you could show some code that be awesome or if you could point me in the right direction where I can find the answer that be awesome to.

回答1:

For predefined values like what you have, you can use the following jQuery/JavaScript code:

$(function() {
    $('#dropDown1').change(function(){
       $('#dropDown2').val('You chose ' + this.value);
    });
});

JS Fiddle here: http://jsfiddle.net/vleong2332/82w7p0a6/

Here is the example to change dropDown1 when dropDown2 changes. http://jsfiddle.net/vleong2332/82w7p0a6/1/



回答2:

Here is another option, scaled down from some development I've done. A bit more flexible but also more complex. Pay attention to how the items are tagged with data-* attributes to decide what is hidden and shown. http://jsbin.com/siyexumulu/1/