Questions Tags Users Unanswered

i need to show states of the country to the state dropdown when i checked a country from country dropdown. if i selected more than one country i need to show all that countries states to show on states dropdown. this is multiple selected dropdown and i need to solve this one. cud you plz help me?

Question is answered.
1 answer (2 voices) (5349 views)
Tags:
<?
$conn = mysql_connect("localhost","root","");
$dbSelect = mysql_select_db("test");
?>
<style type="text/css">
.multiSelect {
width: 9.9em;
font-family: Arial, Helvetica, sans-serif;
color:#000;
position: relative;
height: 22px;
padding: 0;
margin: -.05em 0 0 0;
border: 0;
}
.multiSelect .title {
background-color: #fff;
border: 1px solid #999;
padding: 0;
margin: 0;
cursor: default;
min-width: 9.8em;
}
.multiSelect div.title {
position: absolute;
z-index: 104;
}
.multiSelect div.title-open {
border-bottom: 1px solid #fff;
}
.multiSelect .title {

height: 1.3em;
line-height: 1.2em;
overflow: hidden;
padding: .3em 1.1em .1em .5em;
background: white url(images/multiselect.gif) no-repeat top right;
}
.multiSelect .title:hover {
background: white url(images/multiselect-hover.gif) no-repeat top right;
}
.multiSelectContent {
position: absolute;
color:#000;
z-index: 106;
min-height: 1em;
background:#FFF;
padding: .1em;
display: block;

margin-top: -1px;
border: 1px solid #999;
}
.collapsed {
display: none;
}
.multiSelectContent ul {
overflow: auto;
min-height: 1em;
min-width: 20em;
margin: 0;
padding: 0;
}
.multiSelectContent li {
cursor: pointer;
cursor: hand;
margin: 0 0 .2em 0;
list-style:none;
}
.multiSelectContent li:hover {
background: #ddd;
}
.arc90_multiselect {
width: 12.5em;
height: 1.35em;
visibility: hidden;
}
.a9selectall {
border-bottom: 1px solid #ccc;
}

/* Styles for page layout */
DIV.examples {
margin: 0 0 2em 0;
width: 17em;
border: 1px solid #e9e9e9;
padding: .3em;
}

DIV.examples LABEL.examples {
display: block;
margin: 0 0 .2em 0;
}
@import "style/tool_global.css"; /* Style for this page */
</style>

<script language="javascript" type="text/javascript" src="js/jquery-latest.js"></script>
<script language="javascript" type="text/javascript" src="js/arc90_multiselect.js"></script>

<script language="javascript" type="text/javascript">
$(function() {

$('#langucountry').multiSelect({

position: {
my: 'left bottom',
at: 'left top'
}

});

});
</script>
<script language="javascript" type="text/javascript">
$(function() {
$('#basicmultiselect').multiSelect({select_all_min: 3});
$('#langustate').multiSelect({

select_all_min: 3,
no_selection: "Please select!",
selected_text: " clicked"
});
$('#methods').multiSelect();
});
</script>
<table><tr>
<td width="320" align="left" class="banner1"><? if(!empty($err_cbostate))
{
?>
<img src="images/warning_9x10.gif">&nbsp;<font size=2 color=red>
<?= $err_cbocountry?>
</font> <br>
<b><font size=2 color=red>Location: Country</font></b>
<?
}
else
{
?>
<b><font class="fieldlabel">Location: Country</font></b>
<?
}
// } //if($sell_format==2) online 667
?></td>
</tr>
<tr >

<td align="left" class="banner1">

<select id="langucountry" name="cbocountry[]" class="arc90_multiselect" multiple="multiple" title="Languages" >


<?

$Type_sql="SELECT countryID,countryName FROM countries ORDER by countryName ASC";
$Type_result=mysql_query($Type_sql);
while($Type_rows=mysql_fetch_array($Type_result)){

echo "<option id='".$Type_rows['countryID']."' value='".$Type_rows['countryID']."'>";
echo $Type_rows['countryName'];
echo "</option>";
}
?>
</select>
</td>
</tr>
<tr >
<td align="left" class="banner1"><? if(!empty($err_cbocity))
{
?>
<img src="images/warning_9x10.gif">&nbsp;<font size=2 color=red>
<?= $err_cbocity?>
</font> <br>
<b><font size=2 color=red>Location: State</font></b>
<?
}
else
{
?>
<b><font class="fieldlabel">Location: State</font></b>
<?
}
// } //if($sell_format==2) online 667
?></td>
</tr>
<tr >
<td align="left" class="banner1">
<select id="langustate" name="cbostate[]" class="arc90_multiselect" multiple="multiple" title="Languages" >


<?
$countryID= mysql_real_escape_string($_GET['countryID']);

$Type_sql="SELECT stateName FROM states where countryID = '$countryID' ORDER by stateName ASC";
$Type_result=mysql_query($Type_sql);
while($Type_rows=mysql_fetch_array($Type_result)){
echo "<option id='".$Type_rows['stateID']."' value='";
echo $Type_rows['stateName'];
echo "'>";
echo $Type_rows['stateName'];
echo "</option>";
}
?>
</select></td>
</tr></table>
1 Answer
Hi,

the following example shows you how to create a selection list based on the selected options in a multiple selection list.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script>
        var states = {
            'country1': {'state1': 'State 1', 'state2': 'State 2'},
            'country2': {'state3': 'State 3', 'state4': 'State 4', 'state5': 'State 5'},
            'country3': {'state6': 'State 6', 'state7': 'State 7'}
        };

        function OnCountriesChanged (combo) {
            var selCountries = [];
            for (var i = 0; i < combo.options.length; i++) {
                if (combo.options[i].selected) {
                    selCountries.push (combo.options[i].value);
                }
            }
            var options = '';
            for (var i = 0; i < selCountries.length; i++) {
                var country = selCountries[i];
                for (var state in states[country]) {
                    options += '<option value="' + state + '">' + states[country][state] + '</option>';
                }
            }

            var statesCombo = document.getElementById ("statesCombo");
            statesCombo.innerHTML = options;
        }
    </script>
</head>
<body>
    <select onchange="OnCountriesChanged (this)" multiple="multiple">
        <option value="country1">Country 1</option>
        <option value="country2">Country 2</option>
        <option value="country3">Country 3</option>
    </select>
    <select id="statesCombo"></select>
</body>
</html>
15 30 50 per page

Your Answer

Limit of files to attach: 3 / Max total size: 1024 KB
File:
Description:
remove