CODEWITHSUNDEEP
phpjqueryhtmlmysql
junior
junior

Reputation: 808

HTML select option show list after first select option selected

I have this country table:

+----+-----------+
| ID |  Country  |
+----+-----------+
|  1 | Indonesia |
|  2 | Malaysia  |
|  3 | Brunei    |
+----+-----------+

and this form:

<form action="search.php" method="post" accept-charset="utf-8">

    <label>From:</label>
    <select name="from_country">
        <option value="1">Indonesia</option>
        <option value="2">Malaysia</option>
        <option value="3">Brunei</option>
    </select>

    <label>To:</label>
    <select name="to_country">
        <option value="1">Indonesia</option>
        <option value="2">Malaysia</option>
        <option value="3">Brunei</option>
    </select>

    <input type="submit" value="Submit">
</form>

Both of select option data is populated from country table in my database, what I want to do is:

  1. I want the 2nd select option (to_country) list is empty before the first one (from_country) is selected

  2. After the first one (from_country) is selected the 2nd select option (to_country) list only generated list that hasn't selected yet by first selected option (from_country). So its like when I choose Indonesia in the first select option (from_country), and Indonesia will not show in 2nd select option, except I changed the first one to another country.

How to do that? Should I use php or jquery? Thank you

updated

here is my fiddle based on Mr. Patrick's answer

jsfiddle

Upvotes: 3

Views: 3966

Answers (2)

Patrick Geyer
Patrick Geyer

Reputation: 1535

Use jQuery as PHP is server side.

<form action="search.php" method="post" accept-charset="utf-8">

<label>From:</label>
<select name="from_country" id='from'>
    <option value="1">Indonesia</option>
    <option value="2">Malaysia</option>
    <option value="3">Brunei</option>
</select>

<label>To:</label>
<select name="to_country" id='to'>
    <option value="1">Indonesia</option>
    <option value="2">Malaysia</option>
    <option value="3">Brunei</option>
</select>

<input type="submit" value="Submit">
</form>


<script>
$('#from').on('change', function() { //WHEN USER CHANGES FIRST OPTION
var fromVal = $(this).val(); //MAKE VARIABLE OF SELECTED CHOICE
$('#to option').each(function(){ //FOR EVERY SECOND OPTION
    if($(this).val() == fromVal) { //CHECK IF IT IS EQUAL TO THE FIRST SELECTED CHOICE
        $(this).attr('disabled', 'disabled'); //IF IT IS, HIDE IT
        alert($(this).val());
    } else {
        $(this).removeAttr('disabled'); //OTHERWISE SHOW IT, INCASE HIDDEN FROM PREVIOUS CHOICE
    }
});
});
</script>

JSFiddle

Upvotes: 3

Surjit Sidhu
Surjit Sidhu

Reputation: 387

i have test it, works as you required 

<form action="search.php" method="post" accept-charset="utf-8">
    <label>From:</label>
    <select name="from_country" id='from'>
        <option value="1">Indonesia</option>
        <option value="2">Malaysia</option>
        <option value="3">Brunei</option>
    </select>

    <label>To:</label>
    <select name="to_country" id='to'>
    </select>

    <input type="submit" value="Submit">
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$('#from').on('change', function(){
    var html = '';
    var current_id = $(this).val();
    $('#from option').each(function(){
        if(current_id != $(this).val()){
            html += '<option value="'+$(this).val()+'">'+$(this).text()+'</option>';
        }
    });

    $('#to').html(html);
});
</script>

Upvotes: 2

Related Questions