按钮从外部表单添加选定=“选定”

Button to add selected="selected" from outside form

本文关键字：选定 从外部 表单 添加 按钮      更新时间：2023-09-26

我正在使用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);
}

但这删除了所有其他选定的字段。

任何想法将不胜感激。

尝试使用 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>

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

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

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

而不是使用这个： 

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

这样，将保留您以前的选择，并将新选择追加到以前的选择中。

希望这有帮助。

相关文章：