Questions Tags Users Unanswered

how to write jquery onchange event to get states when country was changed on multiple selection database. and i also want get states of more countries in "state" dropdown ,if i select more than one country from "country" dropdown. please help me!

Question is open.
2 answers (2 voices) (13K views)
how to write jquery onchange event to get states when country was changed on multiple selection database. and i also want get states of more countries in "state" dropdown ,if i select more than one country from "country" dropdown. please help me!


<select id="langucountry" name="country[]" class="arc90_multiselect" multiple="multiple" title="Languages" onchange="getState()">


<? $Type_sql="SELECT countryName FROM countries ORDER by countryName ASC";
$Type_result=mysql_query($Type_sql);
while($Type_rows=mysql_fetch_array($Type_result)){
echo "<option value='";
echo $Type_rows['countryName'];
echo "'>";
echo $Type_rows['countryName'];
echo "</option>";
} ?>
</select>


<select name="state[]">
<?php
$countryID= mysql_real_escape_string($_GET['countryID']);
$Type_sql="SELECT stateName FROM states s where s.countryID = '$countryID' ORDER by stateName ASC";
$Type_result=mysql_query($Type_sql);
while($Type_rows=mysql_fetch_array($Type_result)){
echo "<option value='";
echo $Type_rows['stateName'];
echo "'>";
echo $Type_rows['stateName'];
echo "</option>";
}
?>
</select>
correction : how to write jquery onchange event to get states when country was changed on multiple selection dropdown list. - Abu Eena -
2 Answers
no, this is not simple dropdown, i want to load states of the country or countries to the states dropdown when checked the country checkbox. here is my coding,

<?
$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>
You do not need JQuery to achieve this, it is simpler to use native JavaScript instead.

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.
41.
42.
43.
44.
45.
46.
47.
48.
49.
<select id="langucountry" name="country[]" class="arc90_multiselect" multiple="multiple" title="Languages" onchange="onSelectChanged(this)">
<?php
    $Type_sql = "SELECT countryName FROM countries ORDER by countryName ASC";
    $Type_result = mysql_query( "SELECT countryName FROM countries ORDER by countryName ASC" );
    while ( $Type_rows = mysql_fetch_array($Type_result) ) {
        echo '<option value="'. $Type_rows['countryName'] . '">'. $Type_rows['countryName'] .'</option>';
    }
?>
</select>

<select name="state[]" onchange="onSelectChanged(this)">
<?php 
    $countryID = mysql_real_escape_string($_GET['countryID']);
    $Type_sql = "SELECT stateName FROM states s where s.countryID = '$countryID' ORDER by stateName ASC";
    $Type_result = mysql_query($Type_sql);
    while ( $Type_rows=mysql_fetch_array($Type_result) ) {
        echo '<option value="'. $Type_rows['stateName'] .'">'. $Type_rows['stateName'] .'</option>';
    } 
?>
</select>

<script>
    function onSelectChanged (select) {
        alert ('The select is changed');

        // if any option is selected
        if (select.selectedIndex > -1) {
            // the idxs of options that are selected
            var idxs = [];
            // custom alert text
            var txt = '';
            for (var i = 0; i < select.options.length; i++) {
                var option = select.options[i];
                if (option.selected) {
                    // add the idx of selected option to idxs
                    idxs.push (i);
                    txt += 'The selected option value: '+ option.value + ' text: ' + option.text + "\n";
                }
            }
        }

            // if more than one option is selected
        if (idxs.length > 1) {
            alert ('multiple selection');
        }
        alert (txt);
    }
</script>
15 30 50 per page

Your Answer

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