jQuery event when particular option is selected

Question

I want to add code into a div when a particular option from a select is selected.

This is the code, and I don't know why is not working.

<select id="selectbasic ref" name="selectbasic ix-select-how" class="input-xlarge">
    <option value="" label=""></option>
    <option value="SearchEngine" label="Suchmaschine">Suchmaschine</option>
    <option value="Webhostlist" label="Webhostlist">Webhostlist</option>
    <option value="Press" label="Presse">Presse</option>
    <option value="Friend" label="Bekannte">Bekannte</option>
    <option value="ByChance" label="Zufällig">Zufällig</option>
    <option value="Others" label="Sonstige">Sonstige</option>
</select>
<div class="control-group ix-hidden"></div>

And the jQuery:

$('#ref').change(function () {
    if ($(this).val() === 'Others') {
        $("div.control-group.ix-hidden").append("<label class='control-label'>Wie?</label><div class='controls'><div class='input-prepend'><span class='add-on'><i class='icon-globe'></i></span><input type='text' class='input-xlarge' id='email' name='email' placeholder='Wie?'></div></div>");
    }
});

Are you giving 2 `id`'s selectbasic and ref, does that even work? — Tim Vermaelen, Jun 06 '13 at 12:11

score 3 · Accepted Answer · edited May 23 '17 at 12:05

3

Giving two IDs for a single element is not valid HTML and will lead to undefined behavior in any javascript that attempts to interact with the DOM. Remove the second ID from the select and it works fine:

<select id="ref" name="selectbasic ix-select-how" class="input-xlarge">

http://jsfiddle.net/ueEEW/

Why can't you have two IDs?

edited May 23 '17 at 12:05

Community

1
1

answered Jun 06 '13 at 12:16

jbabey

45,965
12
71
94

score 2 · Answer 2 · answered Jun 06 '13 at 12:16

2

<select id="selectbasic ref" ...>

Attribute ID must be single:

<select id="ref" ...>

answered Jun 06 '13 at 12:16

A. Wolff

74,033
9
94
155

score 0 · Answer 3 · answered Jun 06 '13 at 12:17

0

Please check your jQuery selector. I think your id should be without spaces (try id = 'selectbasicRef') and while referencing it in your jQuery code it should be $("#selectbasicRef").change(function(){ //code });

Hope it helps!

answered Jun 06 '13 at 12:17

Mohit Srivastava

1,909
1
13
18

score 0 · Answer 4 · edited Jun 06 '13 at 12:26

0

First thing is that attribute ID of any filed should be single, and no space between ID attribute name. For example

<select id="ref" name="selectbasic ix-select-how" class="input-xlarge">

Hope it help you.

edited Jun 06 '13 at 12:26

Derek Henderson

9,388
4
42
71

answered Jun 06 '13 at 12:24

Ashok Lalwani

1

score 0 · Answer 5 · edited May 23 '17 at 12:18

0

assigning multiple ids to the same id attribute using a space-separated list is not possible

go through the following link it should clarify your doubts regarding multiple id's

Can an html element have multiple ids?

edited May 23 '17 at 12:18

Community

1
1

answered Jun 06 '13 at 12:30

Chakradhar Vyza

285
4
11

jQuery event when particular option is selected

5 Answers5