CODEWITHSUNDEEP
javascriptjquery
Praful Bagai
Praful Bagai

Reputation: 17372

onchange select(dynamic) dropdown

I'm adding select dropdown and an input field(which is currently disabled) dynamically. I want to get that whenever Others option is selected, the input field should be enabled. Here is my code:-

<div></div>
<button> Add</button>
</body>
<script type="text/javascript">
    $(function(){
        option_html = '<option value="Others">Others</option><option value="Others1">Others1</option>'
        input_html = '<input placeholder="Other, if any" class="form-control input-md others_input" type="text" disabled="disabled">'
        html = '<select class="form-control select_question" name="qa_">' + option_html + '</select>' + input_html
        $('button').on('click', function(){
            $("div").after(html);
        })

        $('select.select_question').on('change', function(){
            alert(111)
            $(this).closest(".others_input").prop('disabled', false);
        })
    })
</script>

I'm not able to catch the onchange event. jsFiddle

Upvotes: 1

Views: 1792

Answers (2)

mplungjan
mplungjan

Reputation: 177692

You need to delegate:

$("#container").on('change',".select_question",function(){
   $(this).next(".others_input").prop('disabled', this.value!="Others");
})

I want it to trigger the change when loaded to enable the others immediately

I use .html instead of .after which is what you meant I am sure. After will add the select AFTER the div instead of inside the div 

$(function(){
  $("#container").on("change","select.select_question",function(){
    console.log(this.value)
    $(this).next(".others_input").prop('disabled', this.value!="Others");
  });

  option_html = '<option value="Others">Others</option><option value="Others1">Others1</option>'
  input_html = '<input placeholder="Other, if any" class="form-control input-md others_input" type="text" disabled="disabled">'
  html = '<select class="form-control select_question" name="qa_">' + option_html + '</select>' + input_html
  $('button').on('click', function(){
    $("#container").html(html);
    $("#container select.select_question").change();
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container"></div>
<button> Add</button>

Upvotes: 1

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

You are using closest in wrong way as input is not parent of the select but comes next to it.

Moreover, select element is binded dynamically, so you need to use delegated event handling syntax:

$(function(){
  option_html = '<option value="Others">Others</option><option value="Others1">Others1</option>'
  input_html = '<input placeholder="Other, if any" class="form-control input-md others_input" type="text" disabled="disabled">'
  html = '<select class="form-control select_question" name="qa_">' + option_html + '</select>' + input_html
  $('button').on('click', function(){
    $("div").after(html);
  })

      $(document).on('change', 'select.select_question', function(){
            alert(111)
            $(this).next(".others_input").prop('disabled', !this.value=="Others");
        });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
<button> Add</button>

Upvotes: 0

Related Questions