atrljoe atrljoe - 3 months ago 9
jQuery Question

Duplicate DropDown while removing Selected Value in 1st Drop down

I am trying to duplicate a drop down list with jquery. Basically I want when the user clicks a button it will run this and it will remove the value they have selected in the previous drop down box. I am getting my values originally from mySQL.Which then outputs them to a drop down list. When I run this though, the only thing I am getting is the first option I have which is "Select an Interest" in my second drop down list. Can Anyone see why this isn't working?

Also these are submitted to a form as Arrays hence the square brackets on the name. I am not sure if this is what is causing this but anyones feedback on that is welcome.

Interests<br />
<select name="selectedint[]" id="selectint">
<option selected value="">Select an Interest</option>
<?
for ($i=0; $i<$setintcount; $i++)
{
if($setinterests[$i] == $interests[$i])
{
echo "<option selected value='$setinterests[$i]'>$setinterests[$i]</option>";
}
else
{
echo "<option value='$setinterests[$i]'>$setinterests[$i]</option>";
}
}
?>
</select>

<select name="selectedint2[]" id="select">
<option selected value="">Select an Interest</option>
<script>
$('#selectint option').each(function()
{

$(document).ready(function () {
if("#selectedint".val() != this)
{
document.write(this);
}
}
});
</script>
</select>

Answer

To copy a dropdownlist and clear the selection you can use the clone method, with removeAttr.

var newDD = $("#yourDD").clone();
$("option", newDD).removeAttr("selected");

Check out this fiddle

Comments