0

さて、次のようなプルダウン メニューがあるとします。

  <form action="" method="POST" name="myform">
            <select name="test_select">
                <option value="1">my val 1</option>
                <option value="3">my val 3</option>
                <option value="4">my val 4</option>
            </select>
            <input type="submit" value="test_button" name="test_button">
        </form>

基本メニューのみです。関数を使用してメニューを検索し、値 2 を追加するにはどうすればよいですか? 私はそれがこのように見えるようにしたい:

 <form action="" method="POST" name="myform">
                <select name="test_select">
                    <option value="1">my val 1</option>
                    <option value="2">my val 2</option>
                    <option value="3">my val 3</option>
                    <option value="4">my val 4</option>
                </select>
                <input type="submit" value="test_button" name="test_button">
            </form>

これでどこに行こうとしているのかを示すために、関数を作成してみました。

<script>
        function addItems()
        {
            var option = document.createElement("option");

            option.text = "val 2"
            option.value = 2

            for (var i = 1; i < 3; i++; ) {
                if (document.getElementsByName.value < 2) {
                    option.text = "val 2"
                    option.value = 2
                }
            }

        }
    </script>

この関数を機能させるにはどうすればよいですか?

4

3 に答える 3

1

動作するようにコードを少し変更しました

function addItems()
    {
      var option = document.createElement("option");

      option.text = "val 2";
      option.value = 2;

      var select = document.getElementsByName('test_select');
      var firstGreater = null;
      if (select.length > 0)
      {
        for(var i = 0; i < select[0].children.length; i++)
        {
          if (select[0].children[i].value > 2)
          {
            firstGreater = select[0].children[i];
            break;
          }

        }
        if (firstGreater != null)
          select[0].insertBefore(option, firstGreater);
        else
          select[0].appendChild(option);
      }     

    }

このスニペットはライブラリを追加する必要はありません。JSBinでライブ デモを見ることができます。

于 2013-04-18T03:53:45.483 に答える
0

まず、構文エラーがたくさんあります。しかし、HTML から始めましょう。

<form action="" method="POST" name="myform">
    <select name="test_select" id="test_select">
        <option value="1">my val 1</option>
        <option value="3">my val 3</option>
        <option value="4">my val 4</option>
    </select>
    <input type="button" value="test_button" name="test_button" onclick="addItems();">
</form>

select に id 属性を追加して、javascript コードで要素を見つけられるようにします。また、ボタンに onclick コールバックを追加して、ボタンをクリックしたときに関数が呼び出されるようにします。ページのリロードを避けるために、タイプを送信からボタンに変更しました。

コードは次のとおりです。

function addItems() {
    var option = document.createElement("option");

    option.text = "my val 2"
    option.value = 2

    var combo = document.getElementById("test_select");

    var found = false;

    for (var i = 0; i < combo.length; i++) {
        if (parseInt(combo[i].value) > 2) {
            combo.add(option, combo[i]);
            found = true;
            break;
        }
    }

    if(!found) {
        combo.add(option, null);
    }


    return false;
}

コンボ変数は選択したものを指しているため、 length を呼び出して現在のサイズを取得したり、 [] を使用して特定の位置のオプションを取得したりできます。

.add() 関数は、ここで説明されているように、2 番目のパラメーターとして渡されるオプションの前に新しいオプションを追加します: .add()

このコードは、オプションが事前にソートされていることを前提としています。

詳細については：

HTML DOM 選択オブジェクト

于 2013-04-18T04:00:55.917 に答える
0

このリンクに移動すると役立つ場合があります

http://www.electrictoolbox.com/javascript-add-options-html-select/

jQueryを使用して<select>にオプションを追加しますか?

それが役に立てば幸い

于 2013-04-18T03:42:19.493 に答える