dropdown issue with jquery

Question

iam working on html select dropdown, if i select "not in list" then it should open new text box . I have two select dropdowns, it is working for one dropdown and it is not woeking for another. please help . Here is my fiddle

http://jsfiddle.net/Raghu123/yhovt8pm/

$(document).ready(function(){
     $("#materialName").change(function(){
         $( "select option:selected").each(function(){
             if($(this).attr("value")=="Not in list"){
                   $(".newMaterialName").show();
                   $("#newMaterialName").focus();

             }
             else {
                 $(".newMaterialName").hide();
             }
         });
     }).change();

$("#Vendor").change(function(){
        $( "select option:selected").each(function(){
            if($(this).attr("value")=="Not in listt"){
                $(".newVendor").show();
                $("#newVendor").focus();

            }
            else  {
                $(".newVendor").hide();
            }
        });
    }).change();
});

here is html

<select class="select-style" id="Vendor" class="form-control" name="Vendor">
    <option value="">---------------------------Select Vendor----------------------------</option>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="Not in listt">Not in list, enter new vendor</option>
</select>
<div class="newVendor">
    <p class="contact"><label for="name">Enter new Vendor name</label></p>
    <input id="newVendor" name="newVendor" type="text" class="form-control">
</div>

<p class="contact"><label for="name">Material Name</label></p>

<select class="select-style" id="materialName" class="form-control" name="materialName">
    <option value="">---------------------------Select Material Name----------------------------</option>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="Not in list">Not in list, enter new Material Name</option>
</select>
<div class="newMaterialName">
    <p class="contact"><label for="name">Enter new Material Name</label></p>
    <input id="newMaterialName" name="newMaterialName" type="text" class="form-control">
</div>

A simple solution is write return false(); at vendor change event — Anubhav Chaudhary
– Anubhav Chaudhary, Commented Jan 16, 2015 at 10:58

VPK · Accepted Answer · 2015-01-16 10:57:35Z

1

The two selectors are not able to identify the respective elements was the reason it didn't worked earlier.

Fiddle

I removed the for loop and fetched values using if($(this).val()

Just for reference, $( "select#materialName option:selected") will also work as it identifies the element uniquely. And to avoid the loop we can directly get the element value using $(this).val().

edited Jan 16, 2015 at 10:57

answered Jan 16, 2015 at 10:46

VPK

3,0781 gold badge30 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alex Char Over a year ago

.attr(...) is only getting the objects value at the start (when the html is created). val() is getting the object's property value which can change many times.

VPK Over a year ago

It was not a unique selector as mentioned by @varun. This $( "select#materialName option:selected") will also work.

Varun Over a year ago

Yes, but here you are passing element ID "#materialName", that was missing in earlier part and because of two select it was only working of one.

Varun · Accepted Answer · 2015-01-16 10:51:11Z

0

Because of 2 select box, $( "select option:selected") is not working. it is expecting something unique to make it work. Please try to change by picking the current selected value like: $(this).val()

answered Jan 16, 2015 at 10:51

Varun

957 bronze badges

Comments

Sam · Accepted Answer · 2015-01-16 10:53:36Z

0

If your working with:

$( "select option:selected").each(function(){

you are selecting any select box, you don't focus on one. So if you have "not in list" at the second box, and you changed the first box, you would get your inputbox under the first box, because the second select is true.

You don't have to loop through every value. you only have to check with

if($(this).val()=="Not in list"){

If the value of the selectbox is "Not in list". You could make one function, you don't need two, one for every select box.

answered Jan 16, 2015 at 10:53

Sam

661 gold badge2 silver badges15 bronze badges

Comments

Amit Singh · Accepted Answer · 2015-01-19 06:36:39Z

0

Reason behind your one dropdown working and the other one is not because the dom is confused by the same statement used twice which is : $( "select option:selected").each(function(){

You have used $( "select option:selected").each(function(){ for both #materialName and #Vendor. The DOM does detect the changes for the first SELECT it finds in the DOM on both change events. This is why only one dropdown is working and other doesn't.

YOU SHOULD CHANGE YOUR TWO LINES TO

$("#materialName").change(function(){
   $( "#materialName option:selected").each(function(){

and

$("#Vendor").change(function(){
       $( "#Vendor option:selected").each(function(){

FIDDLE

edited Jan 19, 2015 at 6:36

answered Jan 16, 2015 at 10:57

Amit Singh

2,2754 gold badges27 silver badges50 bronze badges

Collectives™ on Stack Overflow

dropdown issue with jquery

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related