Remove option from select box based on previous select box

I wish to have two select boxes, the first to select a name from a custom database table and the second to select another name from the same database table but not have the name that was selected in the first select box as an option in the second select box.

I am using migxloopcollection in a select to loop through a custom database of names to select the first name. See below:

<select name="memberid" id="winner1male" onchange="checkMembers()" style="display:none" disabled>
<option value="">Select member ...</option>
[[!migxLoopCollection?
&prefix=`agc_`
&usecustomprefix=`agc_`
&packageName=`honours`
&classname=`Playerdetails`
&selectfields=`id,fullname,gender`
&tpl=`tplOption`
&sortConfig=`[{"sortby":"surname"}]`
&where=`{"gender":"Male"}`
&selected=`[[!+fi.winner1]]`
]]
</select>

I then have a second select using migxloopcollection with a different id, but I do not want the offered selection to include the name from the first select.

<select name="memberid" id="winner2male">style="display:none" disabled>
<option value="">Select member ...</option>
[[!migxLoopCollection?
&prefix=`agc_`
&usecustomprefix=`agc_`
&packageName=`honours`
&classname=`Playerdetails`
&selectfields=`id,fullname,gender`
&tpl=`tplOption`
&sortConfig=`[{"sortby":"surname"}]`
&where=`{"gender":"Male"}`
&selected=`[[!+fi.winner2]]`
]]
</select>

I am able to identify the id of the first selected name and I wanted to exclude it using the &where propery in migxloopcollection.

My tplOption is:

<option value="[[+id]]" data-id="[[+id]]" [[+id:eq=`[[+property.selected]]`:then=` selected="selected"`]]>[[+fullname]]</option>

I appear not to be able to use the &where property as it does not allow a “not equal” in the json data. Can anyone help please.

Maybe something like this works:

&where=`[{"gender":"Male"},{"id:!=":"[[!+fi.winner1]]"}]`

Although, I’m not really sure what you are trying to do. What happens when you choose a different option in the first select element? You probably need a solution with javascript, if you want it do work dynamically on the frontend.

Thanks halftrainedharry. That has helped in so much that the json will work with a not equal to, however, I need to pass the id of the person that I find using an onchange function, into the json array. The [[!fi.winner1]] does not work.

It’s still unclear to me what exactly you are trying to do. I suspect it would be easier to have a solution entirely in javascript without reloading the page.

Maybe this helps:

Thanks for the information and link to stackoverflow. I shall look into it.

The stackoverflow solution works fine… Thanks