CODEWITHSUNDEEP
jquerydrop-down-menu
atrljoe
atrljoe

Reputation: 8151

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>

Upvotes: 0

Views: 1485

Answers (3)

Elminson De Oleo Baez
Elminson De Oleo Baez

Reputation: 620

You can add this logic to jquery :) i hope this help you to use just add onchange="check_selection(this)" to the dropdown list

<script type="text/javascript">


 function check_selection(elt){
    var index = elt.selectedIndex;    
    if (index == 0) {return true;} // always legal
    var elems = elt.form.elements;
    for (var i=0;i<elems.length;i++) {
    if (elems[i] == elt) {continue;} // don't test self
    if ( index == elems[i].selectedIndex) { // same selectedIndex
    alert("Seleccion duplicada por favor elija otro valor.");
    elt.selectedIndex = 0;
    elt.focus(0);
    return false;
    }
    }
    return true;
    }
</script>

Upvotes: 1

Adam Rackis
Adam Rackis

Reputation: 83366

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

Upvotes: 1

Francis Lewis
Francis Lewis

Reputation: 8980

The thing I'm noticing at first glance is that you have $(document).ready inside the $('#selectint option').each(function(). That could be causing it to not even process. The document ready should be outside the $('#selectint option').each(function() so that part only processes when the document is loaded.

2, your if("#selectedint".val() != this) is invalid. 3, you're properly comparing selected values. When comparing the value of "this", you'll want to use $(this).val().

Your new code should look something like this:

$(document).ready(function(){
    var $selected = $('#selectedint').val();

    $('#selectedint option').each(function()
    {
        if($selected != $(this).val())
        {
            document.write(this);
        }
    });
});

One other thing I noticed is that even after a user has selected an option in the top dropdown menu, nothing is going to happen in the bottom dropdown menu. If you want the bottom dropdown menu to only fill with options when the top dropdown menu has a selected value, instead of $(document).ready, do something like

$('#selectedint').change(function(){

So it will fill with data when the selectedint dropdown menu changes value.

Upvotes: 0

Related Questions