Php onchange不起作用jquery.selectbox

在onchange事件在jquery.selectbox-05中不起作用时，我使用了两个下拉框，一个用于国家，另一个用于国家，如果我选择国家，该州将自动拾取，它在正常的php下拉列表中工作，但我在jquery.selectbox中使用了此代码。它不起作用任何人都会帮助我

这是我的密码

<script type="text/javascript" src="scripts/jquery.selectbox-0.5.js"></script>
<script type= "text/javascript" src = "scripts/countries2.js"></script>
$(document).ready(function(){
    $('.selectBoxMedium').selectboxMedium();
    $('.selectBoxSmall').selectboxSmall();
    $('.selectBoxSmallest').selectboxSmallest();
    $('.selectBox').selectbox();
    $(document).pngFix(); 
});
<p class="formInput formSelectBox">
    <select onchange="print_state1('state',this.selectedIndex);" id="country" class= "selectBox data" name ="country"></select>
</p>

<p class="formInput formSelectBox">
    <select name ="state" id ="state" class="selectBox"></select>
    <script language="javascript">print_country1("country");</script>
</p>

$（文档）.ready（函数（）{
$（'.selectBoxMedium'）。selectBoxMedium（）；
$（'.selectBoxSmall'）.selectBoxSmall（）；
$（'.SelectBoxMinister'）.SelectBoxMinister（）；
$（'.selectBox'）.selectBox（）；
$（document.pngFix（）；
});



打印国家1（“国家”）；

Javascript函数：

function print_country1(country_id) {
    // given the id of the <select> tag as function argument, it inserts <option> tags
    var option_str = document.getElementById(country_id);
    var x, i=0;
    for(x in country_arr){
        option_str.options[i++] = new Option(country_arr[x],country_arr[x]);
    }
}

function print_state1(state_id, state_index) {
    var option_str = document.getElementById(state_id);
    var x, i=0;
    state_index++;
    var state_arr = s_a[state_index].split("|");
    for(x in state_arr) {
        option_str.options[i++] = new Option(state_arr[x],state_arr[x]);
    }
}

功能打印国家1（国家id）{
//给定标记的id作为函数参数，它将插入标记
var option\u str=document.getElementById（国家/地区id）；
var x，i=0；
适用于（x个国家/地区）{
选项[i++]=新选项（国家/地区[x]，国家/地区[x]）；
}
}
函数打印状态1（状态id、状态索引）{
var option\u str=document.getElementById（state\u id）；
var x，i=0；
state_index++；
var state_arr=s_a[状态索引]。拆分（“|”）；
对于（x处于状态_arr）{
option_str.options[i++]=新选项（state_arr[x]，state_arr[x]）；
}
}

$（文档）.ready（函数（）{
$（'.selectBoxMedium'）。selectBoxMedium（）；
$（'.selectBoxSmall'）.selectBoxSmall（）；
$（'.SelectBoxMinister'）.SelectBoxMinister（）；
$（'.selectBox'）.selectBox（）；
$（document.pngFix（）；
$（'.SelectBoxMiddle、.selectBoxSmall、.SelectBoxMinimer、.selectBox'）。更改（函数（）{
警报（$（this.attr（'class'）+'已更改'）；
});
$（'#country'）。更改（函数（）{
打印_state1（'state'，$（this+'：selected'）.index（））；
});
打印国家1（“国家”）；
});

---

现在怎么办？

这是你的问题。。。此插件不处理动态选项。我的意思是，当您执行

$element.selectbox（）

时，插件将使用select元素的实际选项执行，如果您更改选项，则不会更新selectbox

因此，如果您有一个带有无选项的select元素，并运行

selectbox

插件，它将创建一个没有选项元素的selectbox。当您更改国家/地区并在

select#states

的选项中执行“重新加载”时，所选国家/地区的所有州都会加载并添加为

select#states

元素的选项，但插件

selectbox

是在页面加载中执行的，不会重新加载其元素中的选项：(

如何修复？在您的情况下，您应该能够删除

select#state

（由selectbox插件生成）的同级，使用新的状态值更新选项，然后再次运行selectbox插件：）

检查此功能：）

---

PS：这个fiddle正在使用，而且没有CSS。这个插件的问题是它无法处理onchange（）事件，因为我们对此非常恼火。所以，这里有一个解决方案

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.selectbox-0.5.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.items').selectbox();
                $('#country_input').blur(function(){
                   setTimeout(function(){
                       var e = document.getElementById("country");
                       var countryCode = e.options[e.selectedIndex].value;
                       getState('state',countryCode);
                   },500)                        

                });
});

</script>

<script type="text/javascript">
function getState(state_id, countryCode)
{
var option_str = document.getElementById(state_id);
option_str.length=0;
option_str.options[0] = new Option('Select State','');
option_str.selectedIndex = 0;
//write your code to get state list with the use of "countryCode"
var state_arr = stateListArray; //assume "stateListArray" is an array which is holding list of states
for (var i=0; i<state_arr.length; i++) {
    option_str.options[option_str.length] = new Option(state_arr[i],state_arr[i]);
}
$('#state').parent().children(':not(#state)').remove();
$('#state').selectbox();
}
</script>

<p>
<select id="country" class= "items" name ="country">
<option value="countryCode">Country Name</option>
</select>

$（文档）.ready（函数（）{
$（'.items'）。选择框（）；
$（“#国家/地区输入”）.blur（函数（）{
setTimeout（函数（）{
var e=document.getElementById（“国家”）；
var countryCode=e.options[e.selectedIndex]。值；
getState（“州”，国家代码）；
},500)                        
});
});
函数getState（状态id，国家代码）
{
var option\u str=document.getElementById（state\u id）；
选项长度=0；
option_str.options[0]=新选项（'选择状态'，''）；
选项\u str.selectedIndex=0；
//使用“countryCode”编写代码以获取州列表
var state\u arr=stateListArray；//假设“stateListArray”是一个保存状态列表的数组
对于（var i=0；i代码在哪里？粘贴您的代码（HTML和JavaScript）：粘贴函数
print_state1
和
print_country1
？函数
print_country1
是否正确执行？函数print_country1（国家id）{//给定标记的id作为函数参数，它插入标记var option_str=document.getElementById（country_id）；var x，i=0；for（x in country_arr）{option_str.options[i++]=new option（country_arr[x]，country_arr[x]）}函数print_state1（state_id，state_index）{var option_str document getElementById（state_id）；var x，i=0；state_index++；var state_arr=s_a[state_index]。拆分（“|”）；for（x in state_arr）{option_str.options[i++]=新选项（state_arr[x]，state_arr[x]）}我从这个网站@vicky获得了代码，你在那里得到了selectbox插件？谢谢你的回复，我对这个页面中的代码有一个疑问，加载调用的然后只获取国家，但是你的代码是$（'#country'）。更改（函数（）{print_state1（'state'，$（this.val（））；）；它没有加载任何国家/地区我从该网站获得代码非常感谢工作正常，但js在同一页面中实现，再次非常感谢much@vicky我在同一个页面中添加了JS，因为我找不到指向.JS文件的直接链接，只针对某些zip文件，JSFIDLE不允许我上载新的JS文件：\n对于您的情况，您仍然应该从远程文件调用js脚本，并将依赖于DOM的js操纵到$.ready:）
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.selectbox-0.5.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.items').selectbox();
                $('#country_input').blur(function(){
                   setTimeout(function(){
                       var e = document.getElementById("country");
                       var countryCode = e.options[e.selectedIndex].value;
                       getState('state',countryCode);
                   },500)                        

                });
});

</script>

<script type="text/javascript">
function getState(state_id, countryCode)
{
var option_str = document.getElementById(state_id);
option_str.length=0;
option_str.options[0] = new Option('Select State','');
option_str.selectedIndex = 0;
//write your code to get state list with the use of "countryCode"
var state_arr = stateListArray; //assume "stateListArray" is an array which is holding list of states
for (var i=0; i<state_arr.length; i++) {
    option_str.options[option_str.length] = new Option(state_arr[i],state_arr[i]);
}
$('#state').parent().children(':not(#state)').remove();
$('#state').selectbox();
}
</script>

<p>
<select id="country" class= "items" name ="country">
<option value="countryCode">Country Name</option>
</select>