1

選択内容に応じてコンテンツを変更する簡単なドロップダウンを作成しています。ただし、前のコンテンツを消去するとともに、jquery は最後のドロップダウン オプションも削除しています。

ここに私のHTMLがあります。

<body>
<h2>Analyze</h2>
<form id="analyze" method="get" action="/results/">
<div id="analyzecontainer">
<p>Search by: </p>
<select id="analyzeselector" class="dropdown" name="analyzeselector">
<option class="dropdownitem" name="select">Select</option>
<option id="byexercisename" class="dropdownitem" name="byexercisename">By Exercise Name </option>
<option id="bydate" class="dropdownitem" name="bydate" value="date">By Date</option>
<option id="byworkoutname" class="dropdownitem" name="byworkoutname" value="workoutname">By Workout Name</option>
</select>
<input id="exercisename" class="textbox required" type="text" name="exercisename" value="Enter Exercise Name">
</div>
<input class="textbox int" type="text" value="How many results" name="numresults">
<input id="submitquery" type="submit">
</form>
</body>

ここに私のJqueryコードがあります：

$(document).ready(
function () {


$(document).on("change", "#analyzeselector", function () {
    var selected = $(this).find(':selected').attr("name");
    if ($("#analyzecontainer :last-child").attr('id') != 'analyzeselector') {
        alert($("#analyzecontainer :last-child").attr('id'))
        $("#analyzecontainer :last-child").remove()
    }

    if (selected == 'byexercisename') {

        $('<input>').attr({
            type: 'text',
            id: 'exercisename',
            name: 'exercisename',
            value: "Enter Exercise Name",
            class: "textbox required"
        }).appendTo('#analyzecontainer')

    }

    else if (selected == 'bydate') {
        $("#analyzecontainer").datepicker({ dateFormat: "yy-mm-dd" });

    }

})

}))

繰り返しますが、ドロップダウンの選択を変更するたびに、最後のドロップダウン オプションが削除されます。みんなありがとう！感謝します。

4

1 に答える 1

2

この行：

$("#analyzecontainer :last-child")

あなたがしていると思うことをしていません。#analyzecontainer親の最後の子である下のすべての要素を削除します。これには、の最後の option要素が含まれselectます。

:lastコンテナの最後の子を取得するために使用できます。

var $lastChild = $("#analyzecontainer :last");
if ($lastChild.attr('id') != 'analyzeselector') {
    $lastChild.remove()
}

例： http： //jsfiddle.net/bthzc/1

于 2012-07-17T19:49:21.313 に答える