在多选选项中选择其他选项时显示输入字段答案

【问题标题】：Show input field when other option is selected in multiple select option在多选选项中选择其他选项时显示输入字段
【发布时间】：2020-09-22 04:59:11
【问题描述】：

我正在尝试存储来自多个选择选项的数据并且它工作正常，现在我要做的是当我选择另一个选项时，将出现一个输入字段并将在其中输入数据，然后一起存储在数据库中选择了其他选项。

我尝试过这样的事情，

<select class="form-control select2" name="sectors[]" onchange='CheckColors(this.value);' multiple>
    
    @if(count(get_sectors()) > 0)
    
    @foreach(get_sectors() as $k=>$s)
    
    <option value="{{ $k }}">{{ $s }}</option>
    
    @endforeach
    
    @endif

    <option value="others">others</option>
                        
</select>
<input type="text" name="sectors[]" id="color" style='display:none;'/>

这是脚本：

<script type="text/javascript">
function CheckColors(val){
 var element=document.getElementById('color');
 if(val=='pick a color'||val=='others')
   element.style.display='block';
 else  
   element.style.display='none';
}

</script>

请帮帮我。

工作

<select class="form-control select2" name="sectors[]" onchange='CheckColors(this.value);'>

【问题讨论】：

您检查过“CheckColors”方法中的值吗？
在选择选项中添加多个时，实际上输入字段也没有出现
你的意思是说如果你只选择一个选项，即“选择一种颜色”或“其他”，那么输入字段是可见的，当你选择更多选项时，输入字段会再次隐藏。对吗？
当我使用上面的“工作部分”时，输入字段出现在选择其他
我认为问题是每次调用选择选项的方法，因此根据该代码选择的任何值都在执行。您需要从下拉列表中获取所有选定的选项值，然后检查该选项是否为选择您必须在其上显示输入字段。

标签： javascript jquery laravel

【解决方案1】：

function CheckColors(val){
    var element=document.getElementById('color');
    var is_input_field_visible = false;
    $(".select2 option").each(function()
    {
        if($(this).val()=='pick a color'|| $(this).val()=='others'){
            element.style.display='block';
            is_input_field_visible = true;
        }
    });

    if(is_input_field_visible == false){
        element.style.display='none';
    }
}

我没有尝试过上面的代码，但你可以检查一下它可能会有所帮助。

【讨论】：

【解决方案2】：

多选返回值将是数组或单个值。

为了从多个数组中获取正确的值。

您应该将您的 javascript 代码更改为。

function CheckColors(val){
        // Get selected options by select ID.
        // change #select-multiple to any id in your select box
        let selected = document.querySelectorAll('#select-multiple option:checked');
        // map all selected values as array
        let values = Array.from(selected).map(el => el.value);
        var element=document.getElementById('color');
        if(val=='pick a color'||val=='others' || values.includes('pick a color'))
            element.style.display='block';
        else
            element.style.display='none';
    }

这样你会在选择多个值或只选择一个值后得到正确的值。

不要忘记为您的选择框提供特定的 ID。

【讨论】：