Question

我正在使用laravel，并试图整合一些我不太擅长的jquery。

我有一个多选框，可能有很多选项，基于数据库值。

<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>

用户可以直接从选择框中选择工具，但这可能是一个巨大的列表，因此我也在选择框下方显示一个搜索字段搜索工具数据库，以便用户可以看到有关该工具的更多信息，然后决定是否要包含它。

目前，用户必须首先搜索，然后在选择框中找到该条目并选择它。

我想要一个更快的解决方案，在该工具的信息旁边有一个按钮，自动将selected =“selected”添加到上面选择框中的正确选项。

我试过

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

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

但这抹去了所有其他选定的字段。

任何想法都会受到赞赏。

Answer 1

尝试使用jQuery的prop函数：

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


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

Answer 2

对于多选，该值是所有选定项的数组。您只是将值设置为单个项目，该项目被视为一个元素的数组，因此所有其他选择都将被丢弃。

因此，您应该获取旧值，向其添加新ID，然后将其设置为新值。

＆＃13;

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

＆＃13;

<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')"/>

＆＃13;

Answer 3

而不是使用它：

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

试试这个：

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);
}

这样就可以保留以前的选择，并将新选择附加到上一个选择。

希望这有帮助。

用于从外部表单添加selected =“selected”的按钮

3 个答案: