Question

Ok, I’ve looked all around, both here and on the web, and can’t begin to find an answer that fits this scenario.

I have a page that allows for dynamic creation of 5 select lists that are XML-fed. I need to disable any selected options in all of the select lists. I am confined to using jQuery 1.5.1 and have to support cross-browser back to IE7. Here’s the code:

HTML

<fieldset class="clearfix clonedInput" id="input1">
<div class="toolTipHolder">
<label for="FooName" class="foo-select">Foo Select List
<select class="foo1 required infoTrigger foo-select" id="foo1" attr-info="This     will be tooltip text.">
<option>loading</option>
</select>
</label>
<input type="button" value="Remove this option" class="foo-remove hidden clearfix" />
</div>
</fieldset>
</div>
<div class="clear">&nbsp;</div>
<div><a href="#" class="addFoo"><input id="btnAdd" type="button" value="Add another foo" class="btnAdd" /></a></div>

JS

$(document).ready(function() {
//XML IMPORT CODE
$.ajax({
type: "GET",
url: "../../includes/foo.xml",
dataType: "xml",
success: function(xml) {
var select = $('.foo1');
$(xml).find('rid').each(function(){
var fna = $(this).find('fna').text();
select.append("<option>"+fna+"</option>");
$(this).find('value').each(function(){
var value = $(this).text();
});
});
select.children(":first").text("please make a selection").attr("selected",true);
$("input, select").focus(function(){ $(this).fooTooltip(); });
}
});
// CODE TO ADD/REMOVE ELEMENTS
$('#btnAdd').attr('disabled','');
$('#btnAdd').click(function() {
var num     = $('fieldset.clonedInput').length; // how many "duplicatable" input fields
var newNum  = new Number(num + 1);      // the numeric ID of the new input field
var selects = $('select');      //for all select lists
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.children().find('select.foo-select').attr('id', 'foo' + newNum);
newElem.find('input.foo-remove').removeClass('hidden').attr('disabled','').attr('id', 'foo' + newNum);
$('#input' + num).after(newElem);
$("input, select").focus(function(){ $(this).fooTooltip(); });
$("select[id^='foo'] option:selected").val();
$('option[value="value-to-search-for"]', this).remove();
selects.change(function() {
var vals = {};
selects.each(function() { 
vals[this.value] = true; }).get();
selects.not(this).children().not(':selected').not(':first-child').each(function() { this.disabled = vals[this.value]; });
});
if (newNum == 5)
$('#btnAdd').attr('disabled','disabled');
return false;
});
$('input.foo-remove').live("click", function() {
$(this).closest('fieldset.clonedInput').remove();
var num = $('fieldset.clonedInput').length; // how many "duplicatable" input fields
$('#btnAdd').attr('disabled','');
if (num-1 == 0)
$('.foo-remove').attr('disabled','disabled').addClass('hidden');
return false;
});
});

The disabling of selected options will work when adding the first cloned select list, but will not work on on subsequent clones. I’ve thrown everything at this and just can’t get it. Please…any help is incredibly appreciated. Thanks!

Answer 1

How about this, say your variable fna is “foo”:

select.append("<option class="+fna+">"+fna+"</option>");

Then add a click handler that like this:

$("option").live("click",function(){
    var _class = $(this).attr("class");
    $("."+class).hide();
});

So, on an option with class (and value) of “foo”, you hide all other “foo” options whenever one of them is clicked.

So crazy it just may work. . .;).

Good luck!