0

onchangeイベントがjquery.selectbox-05で機能していない場合、国に2つのドロップダウンボックスを使用しています。国を選択すると、州は自動的にピックアップしますが、通常の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>

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

3 に答える 3

1

これがあなたの問題です...このプラグインは動的オプションを処理しません。つまり、$element.selectbox()プラグインを実行すると、select要素の実際のオプションが実行され、オプションを変更してもselectboxは更新されません。

したがって、オプションのないselect要素があり、プラグインを実行するselectboxと、options要素のないselectboxが作成されます。国を変更してのオプションで「再読み込み」を行うとselect#states、選択した国のすべての状態が読み込まれ、select#states要素のオプションとして追加されますが、プラグインselectboxはページの読み込みで実行され、要素のオプションは再読み込みされません。 （（

それを修正する方法は？あなたの場合、select#state（selectboxプラグインによって生成された）の兄弟を削除し、新しい状態値でオプションを更新してから、selectboxプラグインを再度実行できるはずです:)

この機能的なjsfiddleを確認してください:)

PS：このフィドルは国で動作しています-3.1.js、jquery.selectbox-0.5、CSSなし

于 2012-06-12T14:13:22.397 に答える
1

このプラグインの問題は、ほとんどイライラしているため、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>

于 2013-09-26T10:03:01.690 に答える
0 
<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>

今何？

于 2012-06-12T13:17:20.113 に答える