Home/ Questions/Q 8239783
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T20:15:46+00:00

i’m making a simple dropdown that changes the content according to what is chosen.

  • 0

i’m making a simple dropdown that changes the content according to what is chosen. However, along with erasing the previous content, jquery is also deleting the last dropdown option.

Here is my 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>

Now here is my Jquery code: 

$(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" });

    }

})

})

Again, every time change my dropdown selection, it deletes the last dropdown option. Thanks guys! Appreciate it.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This line:

    $("#analyzecontainer :last-child")

    Is not doing what you think it’s doing. It’s removing every element underneath #analyzecontainer that is the last child of it’s parent. This includes the last option element in a select.

    You could use :last to get the last child of the container:

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

    Example: http://jsfiddle.net/bthzc/1

    • 0