Button to add selected="selected" from outside form

Question

I am using laravel, and trying to integrate some jquery, which I am not very good at.

I have a multiple select box with potentially lots of options, based on database values.

<div class="toolselect">
<select multiple>
<option value="1">Tool 1</option>
<option value="2">Tool 2</option>
<option value="3">Tool 3</option>
</select>
</div>

The user can select tools directly from the select box, but this can be a huge list and therefore I am also displaying a search field below the select box to search the database of tools so the user can see more info about the tool, and then decide if he wants to include it.

Currently the user has to first search, then find the entry in the select box and select it.

I want a faster solution with a button next to the info about the tool, that automatically adds selected="selected" to the correct option in the select box above.

I tried

<input type="button" value="Mer" onclick="addselect('{{$tool->id}}')"/>

<script type="text/javascript">
addselect = function (id){
$("div.toolselect select").val(id);
}

But that erased all the other other selected fields.

Any ideas would be appreciated.

I'm having a little trouble following. Could you write it in a step by step form? Step 1: User select hammer from list, Step 2: ???? Step 3: Profit! Is there relevant HTML for a input box that's used for search in your scenario? — Matt, Feb 05 '16 at 21:32

score 4 · Answer 1 · edited Feb 05 '16 at 22:04

4

Try using jQuery's prop function:

<input type="button" value="Mer" onclick="addselect('{{$tool->id}}')"/> 


<script type="text/javascript"> 
    addselect = function (id){ 
        $('.toolselect select option[value="'+ id +'"]').prop('selected'); 
    }
</script>

edited Feb 05 '16 at 22:04

alextercete

4,871
3
22
36

answered Feb 05 '16 at 21:37

user2278574

41
2

Barmar · Accepted Answer · 2016-02-05T21:52:48.517

1

For a multi-select, the value is an array of all the selected items. You're just setting the value to a single item, which is treated as an array of one element, so all the other selections get discarded.

So you should get the old value, add the new ID to it, and then set that as the new value.

function addselect(id) {
    $('.toolselect select').val(function(i, oldval) {
        oldval = oldval || []; // oldval = null when nothing is selected
        oldval.push(id);
        return oldval;
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="toolselect">
<select multiple>
<option value="1">Tool 1</option>
<option value="2">Tool 2</option>
<option value="3">Tool 3</option>
</select>
</div>
<input type="button" value="Select 1" onclick="addselect('1')"/>
<input type="button" value="Select 2" onclick="addselect('2')"/>
<input type="button" value="Select 3" onclick="addselect('3')"/>

edited Feb 05 '16 at 21:52

answered Feb 05 '16 at 21:47

Barmar

741,623
53
500
612

Thanks! This seems to work very well, except for when I use the select2 plugin for the dropdown. Then the value is not selected. Any idea of why? (sorry for new question). – Bergkamp10 Feb 05 '16 at 22:23
See http://stackoverflow.com/questions/25395427/programmatically-set-the-value-of-a-select2-ajax – Barmar Feb 05 '16 at 22:26
Thanks a lot, appreciate it, need to improve my searching skills :) – Bergkamp10 Feb 05 '16 at 22:28

score 0 · Answer 3 · answered Feb 05 '16 at 21:41

Instead of using this :

addselect = function (id){
$("div.toolselect select").val(id);
}

Try this :

addselect = function(id) {
  var temp = [];
    var arr = $('select').val();
    for(i=0;i<arr.length;i++){
        temp.push(arr[i]);
    }
    temp.push(id);
  $("div.toolselect select").val(temp);
}

This way your previous selection is preserved, and the new selection is appended to the previous selection.

Hope this helps.

Button to add selected="selected" from outside form

3 Answers3