Populate input text box based on drop down select box in Jquery

Question

I have a drop down select box and input text box. Select box display my categories and its look like this:

<select id="category" name="category"> 
  <option value="">Please select...</option> 
  <option value="1">Category-1</option> 
  <option value="2">Category-2</option> 
  <option value="3">Category-3</option>   
  <option value="4">Other</option> 
</select>

Input text box is like this:

<input type="text" id="otherCategory" name="otherCategory" value="" style="display: none;">

My question is. when an user select only "Other" from dropdown then I need to populate the input text.

I tried it something like this:

$(document).ready(function() {

    $('#category').change(function() {
        var myValue = $(this).val();
        var myText = $("#category :selected").text();

        if (myText != '' AND myText == "Other") {
           $("#otherCategory").show();
        }
    });
});

But I couldn't get it to work. Can anybody tell how I figure this out.

NOTE: my dropdown select populating dynamically.

Thank you.

Replace your AND with &&

stanze
– stanze

2015-05-15 06:42:19 +00:00
Commented May 15, 2015 at 6:42 — stanze
– stanze, Commented May 15, 2015 at 6:42

Tushar · Accepted Answer · 2015-05-15 06:48:11Z

6

You are missing && in if condition. Also, your condition

myText != '' is redundant and not required.

And you need to hide the input when selection changed.

$(document).ready(function () {

    $('#category').on('change', function () {
        var myValue = $(this).val();
        var myText = $.trim($("#category :selected").text()).toLowerCase(); // Trim spaces and convert to lowercase for comparison

        $("#otherCategory").toggle(myText === 'other');
    });
});

Demo: https://jsfiddle.net/tusharj/8ykfmtyt/1/

edited May 15, 2015 at 6:48

answered May 15, 2015 at 6:42

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

Comments

Adil · Accepted Answer · 2015-05-15 06:46:05Z

4

You need to use && instead of AND

Live Demo

if (myText != '' && myText === "Other") {
    $("#otherCategory").show();
}

You can further optimize it by hiding with option other then 'other' is selcted. You do not need to check if it is not empty when you are comparing it with string 'other' so I removed that condition from if statement.

Live Demo

$('#category').change(function () {
      $(this).find(":selected").text() === "Other" ?  
       $("#otherCategory").show() :  $("#otherCategory").hide();
});

edited May 15, 2015 at 6:46

answered May 15, 2015 at 6:41

Adil

148k25 gold badges217 silver badges207 bronze badges

3 Comments

user3733831 Over a year ago

Thank you. What is different of "==" and "===" operator ?

Tushar Over a year ago

== does type conversion and === compares values with their types

Tushar Over a year ago

@user3733831 '1' == 1 is true whereas '1' === 1` is false, because one is integer and other is string

stanze · Accepted Answer · 2015-05-15 06:49:35Z

2

Try this Demo, if user selects other option showing input field else hiding.

$(document).ready(function() {

    $('#category').change(function() {
        var myValue = $(this).val();
        var myText = $("#category :selected").text();

        if (myText == "Other") {
           $("#otherCategory").show();
        }
        else{
            $("#otherCategory").hide();
        }
    });
});

answered May 15, 2015 at 6:49

stanze

2,47814 silver badges14 bronze badges

Collectives™ on Stack Overflow

Populate input text box based on drop down select box in Jquery

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related