I have a select box, from which I want to remove selected choice with jquery.
Please advise me how I can make this working:
this is the code for the markup:
@foreach (var item in Model.Names)
{
<div>
<div class="editor-field">
<select multiple id="@("Select" +item.Name)" name="@("Select" +item.Name)"></select>
</div>
<div>
<a href="#" id="remove">Remove selection</a>
</div>
</div>
}
There are three select boxes and for each one I need to add a hyperlink for removing selection.
Thanks in advance, Laziale
First off you should change
id="remove"toclass="remove"since you will have multiple of these elements and it’s not valid HTML to have the same ID used multiple times.You can use jQuery to select the anchor tags and bind an event handler that removes the anchor’s parent element (which also contains the
<select>elements):Here is a demo: http://jsfiddle.net/7SueN/2/
Note that
.on()is new in jQuery 1.7 and in this case is the same as using.bind(): http://api.jquery.com/onIf you want to only remove the
<select>element associated with each link you can target it for removal:Here is a demo: http://jsfiddle.net/7SueN/1/
Update
I just re-read your question and if you want to remove the selected index of the select when the link is pressed:
Here is a demo: http://jsfiddle.net/7SueN/