CODEWITHSUNDEEP
jqueryappendhtml-select
Eric Mitjans
Eric Mitjans

Reputation: 2169

jQuery event when particular option is selected

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>");
    }
});

Upvotes: 0

Views: 164

Answers (5)

Chakradhar Vyza
Chakradhar Vyza

Reputation: 285

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?

Upvotes: 0

Ashok Lalwani
Ashok Lalwani

Reputation: 1

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.

Upvotes: 0

Mohit Srivastava
Mohit Srivastava

Reputation: 1919

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!

Upvotes: 0

jbabey
jbabey

Reputation: 46647

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?

Upvotes: 3

A. Wolff
A. Wolff

Reputation: 74420

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

Attribute ID must be single:

<select id="ref" ...>

Upvotes: 2

Related Questions