4

次のコードは、フォーム リスト オプションをアルファベット順に並べ替えますが、「getElementsByClassName()」が機能せず、その理由がわかりません。

最新のjQueryを使用しています。

window.onload=function(){
    function sortlist() {
        var cl = document.getElementsByClassName('car_options');
        var clTexts = new Array();

        for(i = 1; i < cl.length; i++) {
            clTexts[i-1] =
                cl.options[i].text.toUpperCase() + "," +
                cl.options[i].text + "," +
                cl.options[i].value;
    }   
    clTexts.sort();

    for(i = 1; i < cl.length; i++) {
        var parts = clTexts[i-1].split(',');
        cl.options[i].text = parts[1];
        cl.options[i].value = parts[2];
    }
    sortlist();
}

本体部分に

     <form action="" method="get">

        <p><label for="car_make"></label>
          <select id="car_make"  class="car_options" name="car_make"> 

            <option value="">By Make</option>
            <option value="Vauxhall">Vauxhall</option>
            <option value="BMW">BMW</option>
            <option value="Toyota">Toyota</option>
            <option value="Lexus">Lexus</option>
            <option value="Audi">Audi</option>
            <option value="Ford">Ford</option>

                </select>


          <label for="car_color"></label>

          <select name="car_color" id="car_color" class="car_options">
                  <option value="">By Color</option>

            <option value="Red">Red</option>
            <option value="Blue">Blue</option>
            <option value="Black">Black</option>
            <option value="Grey">Grey</option>


          </select>


          <input type="submit" name="search" id="search" value="Search">
         </form>
4

2 に答える 2

10

使用するdocument.getElementsByClassName('car_options')[0]

getElementsByClassName指定されたすべてのクラス名を持つ要素のセットを返します。

複数の要素がある場合は、それを反復処理する必要があります。お気に入り

var elements = document.getElementsByClassName('car_options');
for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function() {

    }, false);
}

注: IE では、IE9+でサポートされています。

編集

更新されたコード

function sortlist() {
    var elements = document.getElementsByClassName('car_options');
    for (var j = 0; j < elements.length; j++) {
        var cl = elements[j];
        var clTexts = new Array();

        for (i = 1; i < cl.options.length; i++) {
            clTexts[i - 1] = cl.options[i].text.toUpperCase() + "," + cl.options[i].text + "," + cl.options[i].value;
        }
        clTexts.sort();

        for (i = 1; i < cl.options.length; i++) {
            var parts = clTexts[i - 1].split(',');
            cl.options[i].text = parts[1];
            cl.options[i].value = parts[2];
        }
    }
}

ワーキングデモ

于 2013-10-06T15:46:56.480 に答える