dongshen3352
2012-06-12 13:03
浏览 43

onchange不工作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

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:

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]);
    }
}

图片转代码服务由CSDN问答提供 功能建议

在onchange中,事件在jquery.selectbox-05中不起作用,我正在使用两个下拉框一个用于国家/地区另一个 状态,如果我选择国家,状态将自动拾取它在正常的PHP下拉列表中工作,但我在jquery.selectbox中使用此代码它不起作用任何人都会帮助我

这里我的代码

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

Javascript函数:

  function print_country1(country_id){
 //给出&lt的id  ;选择&GT;  tag作为函数参数,它插入&lt; option&gt;  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]); 
} 
 
 
函数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]); 
} 
  } 
   
 
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • duanchi4544 2012-06-12 14:13
    已采纳

    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.

    So, if you have a select element with no options and run the selectbox plugin, it will create a selectbox with no options elements. 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 :(

    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 :)

    Check this functional jsfiddle :)

    PS: this fiddle is working with countries-3.1.js, the jquery.selectbox-0.5 and no CSS

    点赞 打赏 评论
  • doumei1908 2012-06-12 13:17
    <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?

    点赞 打赏 评论
  • dongzongxun8491 2013-09-26 10:03

    The problem with this plugin is it cannot handle the onchange() event because of that we are mostly irritate. 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>
    

    点赞 打赏 评论

相关推荐 更多相似问题