Question

I need to make some actions depending on which item from my dropdown box is selected.

So I need to make it if an item with prefix Blue is selected then show one textbox below, and if any other item is selected then show some other stuff, how could I do that the easiest way?

More explaination:
Ok…I have a dropdown menu which contains a list of items. What I need to make is so that after they select an item with prefix Blue a input field under dropdown menu shows. If they select any other item something else will happen.

What I have so far is my dropdown menu:

<select id="select1" name="selectz1">
<?php
$id = 0;
while ($row = mysql_fetch_row($result)) {
    echo "<option value=$id>$row[0]</option>";
    $id++;
}
?>
</select>

And that is what HTML generates:

<form action="ThisPage.php" method="POST">
Accounts: <br />
<select id="select1" name="selectz1">
<option value=0>account 2000-01</option><option value=1>account 2000-02</option>
<option value=2>blue 2000-03</option><option value=3>blue 2000-04</option>
</select>
</form>

Answer 1

So, the question, as I understand it is: “How do I show and hide form fields based on the value of a <select>?”

Before we get started, this is a dupe. I’m deeply unsatisfied with the quality of answers there, so I’m going to fly in the face of convention and post my own.

First things first, all of the other answers here are totally on the right track, but they currently fail to explain why they do what they do.

Like others, I’m going to use jQuery in this example. jQuery is an awesome Javascript library that greatly eases a bunch of repetitive, verbose tasks. jQuery exposes an function called $ — yes, just a dollar sign — that lets you access and modify the page.

Step 1

Let’s create a minimal example, similar to your existing code.

<form>
    <select name="select1" id="select1">
        <option value="1">account 001</option>
        <option value="2">account 002</option>
        <option value="3">blue 001</option>
    </select>
    <input type="text" name="text1" id="text1">
</form>

Important things to point out:

1. Modern HTML requires that attribute values (value="1") be quoted.
2. All the elements we need to target with jQuery need to be easily identifiable. We’re using ids here.

Step 2

Let’s attach an event listener. Events are things that happen while you interact with the page. In our case, we’re going to listen to the <select> for the change event.

<script type="text/javascript">
$(function() {
    $('#select1').on('change', function(event) {
        alert(this.value);
    });
});
</script>

That’s a whole lot of jargon in not much space. Let me explain a bit.

• $() is a function call to jQuery.
• $(function(){ ... }) is passing a function to the jQuery object. This is a shortcut that says “jQuery, when the page is done loading, run this function.”
• $('#select1') asks jQuery to find the element id‘d with “select1”
• $('#select1').on('change', function ...) asks jQuery to watch for the change event, and execute the requested function.
• Finally, inside the function itself, we’re going to throw an alert dialog with the current value of the select element.

Here’s a demo on jsfiddle.

Step 3

Now we have some Javascript running whenever the select menu is changed. Let’s show and hide that text box!

First, we need to make it hidden. Because we’re showing and hiding it with Javascript, we should tell it to only hide when Javascript can run. Hiding things from people that can’t run Javascript makes them grumpy. So, we’ll add a new line to our onload handler:

$(function() {
    $('#text1').hide();
    $('#select1'). // ...
});

If you guessed that new line is “ask jQuery to hide the text1 element,” you guessed correctly!

Now, how do we watch for “blue” options? Head back up to that jsfiddle and play with it. Did you notice that the value of the option is being alerted? Those aren’t blue at all! We need to actually get to the selected option instead of just the value. That’s a bit funnier.

Let’s take a peek at MDN’s documentation on <select>. It tells us that it’s going to expose itself as a HTMLSelectElement. Not a big surprise. It has a property called selectedIndex, which tells us which option has been picked, and it has a property called options, which gives us direct access to the options themselves. Sweet!

Let’s update the onload again:

<script type="text/javascript">
$(function() {
    $('#text1').hide();
    $('#select1').on('change', function(event) {
        var opt = this.options[ this.selectedIndex ];
        alert('You picked ' + $(opt).text());
    });
});
</script>

Again, a jsfiddle demo.

options there is an array. Javascript, like PHP, uses square brackets to access array elements.

So, we’re picking our option, then wrapping it in jQuery then calling the text method to get the text node inside the element, as opposed to the form value.

Great, now we have a string. What can we do with it?

Step 4

Like PHP, Javascript has regular expressions, a way to do pattern matching. Hey, we have a pattern to match against!

<script type="text/javascript">
$(function() {
    $('#text1').hide();
    $('#select1').on('change', function(event) {
        var opt = this.options[ this.selectedIndex ];
        var picked_blue = $(opt).text().match(/blue/i);
        if(picked_blue) {
            alert('You picked a blue option!');
        } else {
            alert('You did not pick a blue option.');
        }
    });
});
</script>

Again, a jsfiddle demo.

We’re now using the match method on the String object to use a regex. In particular, a regex that looks for the characters blue, in a case-insensitive manner (the i at the end does that).

This code should be detecting blue things now. Time to finally hide and show that text field!

Step 5

Let’s dive right in.

$(function() {
    $('#text1').hide();
    $('#select1').on('change', function(event) {
        var opt = this.options[ this.selectedIndex ];
        var picked_blue = $(opt).text().match(/blue/i);
        if(picked_blue) {
            $('#text1').show();
        } else {
            $('#text1').hide();
        }
    });
});

​

Did you see it coming? Can you guess what it does?

Here’s the jsfiddle demo.

And here we are, mission accomplished. You can apply this same technique to all sorts of stuff.

Pay attention to the links I’ve scattered throughout here, especially to jsfiddle, which is a great playground for Javascript and HTML, and to the MDN sites, which are a great Javascript and HTML reference. Oh, and to the jQuery manual.