javascript - ドロップダウンリストで選択した番号に基づいて同じアクションを複数回実行するにはどうすればよいですか？

Question

生成する必要のある回数に基づいて、ドロップダウンとテキストタイプ入力フィールドの複数のセット（1つのセットが3つのドロップダウンと1つの入力タイプ=テキストで構成される）を生成するには、別のドロップダウンから数値を選択する方法があります。

私のコードはこれです：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add New Detail</title>
<link href='http://fonts.googleapis.com/css?family=Orienta' rel='stylesheet' type='text/css'>

<style type="text/css">
#main {
    background-color:#0CF;
    width:600px;
    padding:25px 0;
}

#drop_box_set {
    background:#666;
    width:90%;
    color:#FFF;
    padding:25px 0;
}

</style>
<!------------------------------------------------------------------------------------------------>
<!--------------------------- CHANGE OPTIONS ON CHILD DROPDOWN SCRIPT ---------------------------->
<!------------------------------------------------------------------------------------------------>

<script type="text/javascript">
function setOptions(chosen, selbox) {

selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
setTimeout(setOptions(' ',document.add_new_customer_form.optthree),5);
}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new Option('first choice - option one','11');
  selbox.options[selbox.options.length] = new Option('first choice - option two','12');
setTimeout(setOptions('11',document.add_new_customer_form.optthree),5);
}
if (chosen == "2") {
  selbox.options[selbox.options.length] = new Option('second choice - option one','21');
  selbox.options[selbox.options.length] = new Option('second choice - option two','22');
setTimeout(setOptions('21',document.add_new_customer_form.optthree),5);
}
if (chosen == "3") {
  selbox.options[selbox.options.length] = new Option('third choice - option one','31');
  selbox.options[selbox.options.length] = new Option('third choice - option two','32');
setTimeout(setOptions('31',document.add_new_customer_form.optthree),5);
}
if (chosen == "11") {
  selbox.options[selbox.options.length] = new Option('first choice - option one - sub one','111');
  selbox.options[selbox.options.length] = new Option('first choice - option one - sub two','112');
}
if (chosen == "12") {
  selbox.options[selbox.options.length] = new Option('first choice - option two - sub one','121');
  selbox.options[selbox.options.length] = new Option('first choice - option two - sub two','122');
}
if (chosen == "21") {
  selbox.options[selbox.options.length] = new Option('second choice - option one - sub one','211');
  selbox.options[selbox.options.length] = new Option('second choice - option one - sub two','212');
}
if (chosen == "22") {
  selbox.options[selbox.options.length] = new Option('second choice - option two - sub one','221');
  selbox.options[selbox.options.length] = new Option('second choice - option two - sub two','222');
}
if (chosen == "31") {
  selbox.options[selbox.options.length] = new Option('third choice - option one - sub one','311');
  selbox.options[selbox.options.length] = new Option('third choice - option one - sub two','312');
}
if (chosen == "32") {
  selbox.options[selbox.options.length] = new Option('third choice - option two - sub one','321');
  selbox.options[selbox.options.length] = new Option('third choice - option two - sub two','322');
}
}
</script>

</head>

<body>

<div align="center"><!--DIV ALIGNMENT CENTER START-->

<div id="main"><!--DIV MAIN START-->

<form name="add_new_customer_form" method="post" action="">

<label class="description">Number Of Computer Devices : </label>

            <select name="element_19" class="short_select"> 
                <option value="" selected="selected"></option>
                        <option value="01" >01</option>
                        <option value="02" >02</option>
                        <option value="03" >03</option>
                        <option value="04" >04</option>
                        <option value="05" >05</option>
                        <option value="06" >06</option>
                        <option value="07" >07</option>
                        <option value="08" >08</option>
                        <option value="09" >09</option>
                        <option value="10" >10</option>
                        <option value="11" >11</option>
                        <option value="12" >12</option>
                        <option value="13" >13</option>
                        <option value="14" >14</option>
                        <option value="15" >15</option>

        </select>
<div id="drop_box_individual"><!--DIV DROP_BOX_INDIVIDUAL START-->
<label class="description">Device Type : </label>

            <select name="optone" class="element select medium" style="width:200px;" onchange="setOptions(document.add_new_customer_form.optone.options[document.add_new_customer_form.optone.selectedIndex].value,document.add_new_customer_form.opttwo);">
                <option value=" " selected="selected"> </option>
                        <option value="1">First Choice</option>
                        <option value="2">Second Choice</option>
                        <option value="3">Third Choice</option>
            </select>

</div><!--DIV DROP_BOX_INDIVIDUAL ENDS-->

<div id="drop_box_individual"><!--DIV DROP_BOX_INDIVIDUAL START-->
<label class="description">Device Brand : </label>

            <select name="opttwo" class="element select medium" style="width:200px;" onchange="setOptions(document.add_new_customer_form.opttwo.options[document.add_new_customer_form.opttwo.selectedIndex].value,document.add_new_customer_form.optthree);">
                <option value=" " selected="selected"></option>
            </select>
</div><!--DIV DROP_BOX_INDIVIDUAL ENDS-->

<div id="drop_box_individual"><!--DIV DROP_BOX_INDIVIDUAL START-->
<label class="description">Operating System : </label>

            <select name="optthree" class="element select medium" style="width:200px;">
                <option value=" " selected="selected"></option>
            </select>

</div><!--DIV DROP_BOX_INDIVIDUAL ENDS-->

<div id="drop_box_individual"><!--DIV DROP_BOX_INDIVIDUAL START-->
<label class="description">Serial Number : </label>

            <input name="element_10" class="element text medium" type="text" maxlength="255" value=""/>
</div><!--DIV DROP_BOX_INDIVIDUAL ENDS-->
</form>
</div><!--DIV MAIN ENDS-->
</div><!--DIV ALIGNMENT CENTER ENDS-->

</body>
</html>

また、解決策を探しているときに出くわしたjsFiddleへのリンクもあります。

上記のjsFiddleでは、「追加」ボタンをクリックすると、02個のドロップダウン+01個のtype=text入力フィールドのセットと、必要以上に生成された場合に備えて「削除」ボタンが生成されます。

これはまさに私が必要としていることですが、違いは、自動化されたプロセスである必要があるということです。

私が必要としているのは（私のコードによると）：

「コンピューターデバイスの数」という最初のドロップダウンから05を選択すると、05セットのドロップボックスとtype = text入力が生成され、ボタンが削除されます。

05セットを生成する必要があります。ここで、01 set = 03 dropdowns + 01 type=text入力フィールドと、必要以上に生成された場合は削除ボタン。

score 1 · Accepted Answer

コードにループを追加します。

このような

JS

$(function() {
    $("input[type=button][value=Add]").click(function(e) {
        for (i = 0; i < document.getElementById('sel').value; i++) {
            e.preventDefault();
            var newDiv = $("<div>").appendTo("#div");
            $("<input>").attr("name", "a").appendTo(newDiv);
            $("<input>").attr("name", "b").appendTo(newDiv);
            $("<select>").attr("name", "c").appendTo(newDiv).append(
            $("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2"));
            $("<select>").attr("name", "d").appendTo(newDiv).append(
            $("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2"));
            $("<button>").text("Remove").appendTo(newDiv).click(function(e) {
                e.preventDefault();
                newDiv.remove();
            })
        }
    })
})

HTML

<form>
    <div id="div"></div>
    <select id="sel">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    <input type="button" value="Add" />
</form>

ここで動作することを確認してください：http：//jsfiddle.net/RASG/bYBPD/

score 0 · Accepted Answer

すべてのコードを理解できるかどうかはわかりませんが、問題を理解しているかどうかを確認させてください。

ドロップダウンボックスからユーザーが複数のデバイスを選択できるようにするフォームがあります。ユーザーが数値を選択した後、対応する数のフォーム要素を入力する必要があります。

この例を使用して、フィドル内のコードの一部をマージしてみませんか。

score 0 · Accepted Answer

ヒント: 次のものを置き換えることができます:

> <select name="optone" ... onchange="setOptions(document.add_new_customer_form.optone.options[document.add_new_customer_form.optone.selectedIndex].value,document.add_new_customer_form.opttwo);">

と：

<select name="optone" ... onchange="setOptions(this.value, this.form.opttwo)">

他のリスナーについても同様です。

また、XHTML の移行用 DOCTYPE を削除することをお勧めします。XHTML に移行していないことは明らかです (XHTML 1.0 から 12 年が経過しましたが、DOCTYPE に関係なく、ドキュメントを XML として提供する Web サイトはほとんどありません)。DOCTYPE html.

javascript - ドロップダウンリストで選択した番号に基づいて同じアクションを複数回実行するにはどうすればよいですか？

3 に答える 3

Related

Reference