1

国リスト用と州リスト用の2つのマルチ選択ボックスがあります

<select multiple="multiple" name="country[]" id="country" >
      <option value="0">Select a Country</option>


  <?php 
    foreach($country_list as $key=>$value){
    echo "<option value=\"$key\"";
      if($html['Country Name']==$key|| $row['Country Name']==$key){
       echo ' selected="selected"';
      }
    echo ">$value</option>\n";                                     
    }?>
</select>


<select multiple="multiple" name="state[]" id="state">
      <option value="">Select a State</option>
      <?php 
        foreach($state_list as $key=>$value){
        echo "<option value=\"$key\"";
          if($html['state']==$key|| $row['state']==$key){
            echo ' selected="selected"';
          }
        echo ">$value</option>\n";                                     

        }?>
    </select>

私はこのJavaScriptコードを持っています

window.onload = function() {
    var selectCountry = document.getElementById('country');
    selectCountry.onchange = function() {
        document.getElementById('state').disabled = (selectCountry.value != 'USA')? true : false;
    };
};

このコードは、米国以外の国が選択されている場合、選択ボックスを無効にします。最初のドロップダウンで複数の国が選択されている場合でも無効にしたい（ユーザーがUSAとCANを選択した場合は、それも無効にする必要があります）。助言がありますか。私はJqueryで動作するコードを持っていますが、私のサーバーはJqueryをまったくサポートしていないようです。従来のJSでそれが必要です。

4

3 に答える 3

3

選択したすべてのオプションを確認し、そのうちの1つにUSAと等しい値があるかどうかを確認してください。

selectCountry.onchange = function() {
        var disabled = false;
        for(var i = 0; i < this.options.length; i++){
            if(this.options[i].selected && this.options[i].value == 'USA') {
                disabled =true;
                break
            }
        }
        document.getElementById('state').disabled = disabled;
    };

要素thisを指すことに注意してください。selectCountry

また、サーバーがjqueryを「サポート」することはありません。jquery.jsファイルをWebサイトのディレクトリに置き、Webサイトにリンクを追加するだけです。

プロパティを使用すると少し単純なコードを取得できますがselecteOptions、すべてのブラウザでサポートされているかどうかを確認できません。

var disabled = false;
    for(var i = 0; i<this.selectedOptions.length; i++){
        if(this.selectedOptions[i].value == "3") {
            disabled =true;
             break
        }
    }
于 2013-01-22T11:51:13.300 に答える
2

ここにあなたを助けるはずの少しのコードがあります。すべてのオプション要素を繰り返し処理して、それらが選択されているかどうかを確認する必要があります。もしそうなら、あなたはそれを「USA」と照合する必要があります-

このHTMLを考えると-

<select id="country" multiple="multiple">
    <option value="usa">usa</option>
    <option value="canada">canada</option>
    <option value="israel">israel</option>
</select>

あなたはこのようなことをするでしょう-

var selectCountry = document.getElementById('country');

var usaIsMarked = false;
selectCountry.onchange = function () {
    usaIsMarked = false;
    for (i = 0; i < selectCountry.options.length; i++) {
        var currentOption = selectCountry.options[i];
        if (currentOption.selected && currentOption.value == 'usa') {
            usaIsMarked = true;
        }
    }
    if (usaIsMarked) {
        alert("usa was marked!");
    }
};

これが簡単なデモです

于 2013-01-22T11:50:58.360 に答える
2

複数のオプションが選択されているかどうかをテストするには、オプションをループしてselectedプロパティをテストする必要があります。

window.onload = function() {
    var selectCountry = document.getElementById('country'),
        selectState = document.getElementById('state');

    selectCountry.onchange = function() {
        var options = this.options,
            selected = 0, i, o;

        // Loop over <option> tags
        for (i = 0, o = options.length; i < o; i++) {
            option = options[i];

            // If selected options are less than 1 and country value is NOT 'USA'
            if (selected <= 1 && this.value !== 'USA') {

                // ...check if option is selected and increment "selected" var if true
                if (option.selected) {
                    selected += 1;
                }
            } else {
                // ...otherwise disable the state select ad break out of the loop
                selectState.disabled = true;
                break;
            }
        }
    };
};

SebastianGが言ったように、jQueryの実行はサーバーに依存しません。jQueryは任意のサーバーで実行できます。「jQuery」または「$」エイリアスを参照する前に、サーバーまたは選択したCDNから正しく読み込まれていることを確認する必要があります。jQuery（スペース用のTiny URL）を含む詳細な入門チュートリアルは次のとおりです： http：//tinyurl.com/arhmcro

于 2013-01-22T12:09:33.673 に答える