[英]onchange not working jquery.selectbox
In onchange event is not working in jquery.selectbox-05, i am using two dropdown box one for country another one state if i select the country the state will pickup automatically it's work in normal php dropdown but i use this code in jquery.selectbox it's not working anybody will help me 在onchange上事件不能在jquery.selectbox-05中工作,我使用两个下拉框一个国家另一个状态,如果我选择国家状态将自动拾取它的工作在正常的PHP下拉,但我在jquery.selectbox中使用此代码它不起作用任何人都会帮助我
Here my code 在这里我的代码
<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>
Javascript functions: 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]);
}
}
Here's your problem... this plugin don't handle with dynamic options. 这是你的问题...这个插件不处理动态选项。 I mean, when you do
$element.selectbox()
the plugin executes with the actual options for the select element and will not update the selectbox if you changes the options. 我的意思是,当你执行
$element.selectbox()
,插件会执行select元素的实际选项,如果更改选项,则不会更新选择框。
So, if you have a select element with no options and run the selectbox
plugin, it will create a selectbox with no options elements. 因此,如果您有一个没有选项的select元素并运行
selectbox
插件,它将创建一个没有选项元素的选择框。 When you changes the country and do a "reload" in the options for select#states
, all the states for the selected country are loaded and added as options for select#states
element, but the plugin selectbox
was executed in page load and will not reload the options in their elements :( 当您更改国家/地区并在
select#states
的选项中执行“重新加载”时,所选国家/地区的所有状态都会加载并添加为select#states
元素的选项,但插件选择selectbox
是在页面加载时执行的,不会重新加载其元素中的选项:(
How to fix it? 怎么解决? In your case, you should be able to remove the siblings of
select#state
(generated by selectbox plugin), update the options with new state values and then run again the selectbox plugin :) 在您的情况下,您应该能够删除
select#state
(由selectbox插件生成)的兄弟,使用新的状态值更新选项,然后再次运行selectbox插件:)
Check this functional jsfiddle :) 检查这个功能jsfiddle :)
PS: this fiddle is working with countries-3.1.js , the jquery.selectbox-0.5 and no CSS PS:这个小提琴正在与countries-3.1.js , jquery.selectbox-0.5和没有CSS合作
The problem with this plugin is it cannot handle the onchange() event because of that we are mostly irritate. 这个插件的问题是它无法处理onchange()事件,因为我们主要是烦恼。 So, here is the solution for that..
所以,这是解决方案..
<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>
<script type="text/javascript" src="scripts/jquery.selectbox-0.5.js"></script>
<script type="text/javascript" src = "scripts/countries2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.selectBoxMedium').selectboxMedium();
$('.selectBoxSmall').selectboxSmall();
$('.selectBoxSmallest').selectboxSmallest();
$('.selectBox').selectbox();
$(document).pngFix();
$('.selectBoxMedium, .selectBoxSmall, .selectBoxSmallest, .selectBox').change(function() {
alert($(this).attr('class') + ' has changed');
});
$('#country').change(function() {
print_state1('state', $(this+':selected').index());
});
print_country1("country");
});
</script>
<p class="formInput formSelectBox">
<select id="country" class="selectBox data" name="country"></select>
</p>
<p class="formInput formSelectBox">
<select name="state" id="state" class="selectBox"></select>
</p>
WHAT NOW? 现在怎么办?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.