javascript - 動的に追加するにはどうすればよいですか価値？

Question

登録フォームの場合、フォームフィールドで選択した番号（＃）に基づいてユーザーにさらに多くのオプションを提供する方法を探しています。

私はjavascriptでこれを行う方法を検索して見つけましたが、タグを許可していません。ただし、などは受け入れますが、ドロップダウンメニューフィールドは受け入れません。

 <fieldset>
    <legend>Step 2/3: Virtual Machine Options</legend>
                    <div>
                        <label for="vmammount">Order # VM's</label>
                        <select name="vmammount" required="required">
                            <option value=""></option>
                            <option value="1">1</option>
                            <option value="2">3</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>                        
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                        </select>
                    </div>
                    <div>
                        <label for="vmos">VM OS 1</label>
                        <select name="vmos" required="required">
                            <option value=""></option>
                            <option value="1">Windows Server 2008</option>
                            <option value="2">Windows XP</option>
                            <option value="3">Debian</option>
                            <option value="4">CentOS</option>
                        </select>
                    </div>
<div>
                        <label for="vmos">VM OS 2</label>
                        <select name="vmos" required="required">
                            <option value=""></option>
                            <option value="1">Windows Server 2008</option>
                            <option value="2">Windows XP</option>
                            <option value="3">Debian</option>
                            <option value="4">CentOS</option>
                        </select>
                    </div>
                </fieldset>

OS 1フィールドは常に表示され、その後に続く他の選択フィールドは、ユーザーが1から10までの値を選択する最初のフィールドに依存します。何か提案はありますか？

score 1 · Accepted Answer

これを試すことができます、http：//supunk.blogspot.se/2009/01/creating-select-list-using-javascript.html

これは少し変更されたコードです

var numSelects = 3; //change this to the value of the first select
var foo = document.getElementById("fooBar");
for(var i = 0; i <= numSelects; i++)
{
/* create select */
var select = document.createElement("select");
select.setAttribute("name", "mySelect_" + i);
select.setAttribute("id", "mySelect_" + i);
select.style.width = "300px";

var option;

for( var j = 0; j <= 5; j++ )
{
 /* we are going to add two options */
 /* create options elements */
 option = document.createElement("option");
 option.setAttribute("value", "value_" + i "_" + j);
 option.innerHTML = "Text #" + j + " in box #" + i "!";
 select.appendChild(option);
 }
 foo.appendChild( select );
}

score 0 · Accepted Answer

最良の方法は、HTML / PHPですべてのOS選択要素を作成することです...ただし、必要な場合にのみ表示してください。ここにjQueryの例があります。これは、プレーンなjavascriptでも可能ですが、少なくとも10倍のmutch行のコードが必要です。

http://jsfiddle.net/vuPwM/2/

<fieldset>
    <legend>Step 2/3: Virtual Machine Options</legend>
        <div>
            <label for="vmammount">Order # VM's</label>
            <select name="vmammount" id="vmammount" required="required">
                <option value=""></option>
                <option value="1">1</option>
                <option value="2">3</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>
        <div id="vmos_block">
            <div class="vmos" id="vmos_block_1">
                <label for="vmos_1">VM OS 1</label>
                <select name="vmos[1]" id="vmos_1" required="required">
                    <option value=""></option>
                    <option value="1">Windows Server 2008</option>
                    <option value="2">Windows XP</option>
                    <option value="3">Debian</option>
                    <option value="4">CentOS</option>
                </select>
            </div>

            <div class="vmos" id="vmos_block_2">
                <label for="vmos_2">VM OS 2</label>
                <select name="vmos[2]" id="vmos_2" required="required">
                    <option value=""></option>
                    <option value="1">Windows Server 2008</option>
                    <option value="2">Windows XP</option>
                    <option value="3">Debian</option>
                    <option value="4">CentOS</option>
                </select>
            </div>

            <div class="vmos" id="vmos_block_3">
                <label for="vmos_3">VM OS 3</label>
                <select name="vmos[3]" id="vmos_3" required="required">
                    <option value=""></option>
                    <option value="1">Windows Server 2008</option>
                    <option value="2">Windows XP</option>
                    <option value="3">Debian</option>
                    <option value="4">CentOS</option>
                </select>
            </div>

            <div class="vmos" id="vmos_block_4">
                <label for="vmos_4">VM OS 4</label>
                <select name="vmos[4]" id="vmos_4" required="required">
                    <option value=""></option>
                    <option value="1">Windows Server 2008</option>
                    <option value="2">Windows XP</option>
                    <option value="3">Debian</option>
                    <option value="4">CentOS</option>
                </select>
            </div>
        </div>
</fieldset>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    $('.vmos').hide();

    $("#vmammount").change(function () {
        $('.vmos').hide();

        if ($(this).val() < 1) {
            return false;
        }

        for (var i = 1; i <= $(this).val() ; i++) {
              $('#vmos_block_' + i).show();          
        }

        return true;
    });
});//]]>  

</script>

score 0 · Accepted Answer

私はあなたの質問を理解していないかもしれませんが、登録フォームの状態を処理するクライアント側のビューモデルを定義できるKnockout.jsのようなフレームワークを使用すると、これを非常に簡単に行うことができます。

モデルを見る

var ViewModel = function () {
    var self = this;

    this.vmaValue = ko.observable(1);
    this.vmaOptions = ko.observableArray([1, 2, 3, 4, 5]);
}

ko.applyBindings(new ViewModel());

マークアップ

<select data-bind="options: vmaOptions, value: vmaValue"></select>

<!-- ko if: vmaValue() === 1 -->
<div>
    <label for="vmos">VM OS 1</label>
    <select name="vmos" required="required">
        <option value=""></option>
        <option value="1">Windows Server 2008</option>
        <option value="2">Windows XP</option>
        <option value="3">Debian</option>
        <option value="4">CentOS</option>
    </select>
</div>
<!-- /ko -->

<!-- ko if: vmaValue() === 2 -->
<div>
    <label for="vmos">VM OS 2</label>
    <select name="vmos" required="required">
        <option value=""></option>
        <option value="1">Windows Server 2008</option>
        <option value="2">Windows XP</option>
        <option value="3">Debian</option>
        <option value="4">CentOS</option>
    </select>
</div>
<!-- /ko -->

フィドルは次のとおりです。http：//jsfiddle.net/vEQ9d/この例は大幅に簡略化されており、Knockoutを使用すると、ここで示しているものよりも多くのことができることに注意してください。サーバー、それをすべてフィドルで表示するのは難しいです。

score 0 · Accepted Answer

jQueryの使用に問題がない場合：

$("#labelID").change(function(){
    switch($(this).val()){
        case "1":
            $("#VMOS1").show();
            break;
        case "2":
            $("#VMOS2").show();
            break;
    }
})

これは、要素にIDとクラスを追加する必要がある大まかな例です。

javascript - 動的に追加するにはどうすればよいですか別のタグに基づく価値？

4 に答える 4

Related

Reference

javascript - 動的に追加するにはどうすればよいですか価値？