时间戳

首页 > 解决方案 > 如何使用 jquery 将选择下拉菜单设置回其标题属性？

javascript - 如何使用 jquery 将选择下拉菜单设置回其标题属性？

问题描述

所以我想做的是我有标题属性的下拉列表和一些选项，如下所示：

<select class="form-control kt-selectpicker" id='from_1_0' name='from_1_0'  title="From">   
                                                <option selected value="7">7 am</option>
                                                <option  value="8">8 am</option>
                                                <option  value="9">9 am</option>
                                                <option  value="10">10 am</option>
                                                <option  value="11">11 am</option>
                                                <option  value="12">12 pm</option>
                                            </select>

现在，如果用户更改上面的下拉列表以选择任何时间，例如他们选择了设置时间 8am 的选项，如下面的输出：

在此处输入图像描述

一旦完成，我就有了重置按钮，我试图再次添加代码以再次将我的下拉菜单设置回其原始状态，如下所示：

在此处输入图像描述

所以不知道如何设置我的选择下拉选项以在选项中设置标题？

我尝试了一些如下代码：

//alert("J= "+j+" here");
                    //$("#from_1_"+j).attr('title','From');
                    //var test = $("#from_1_"+j).text();
                    //console.log(test);
                    //$("#from_1_"+j).selectpicker('refresh');
                    //$("#to_1_"+j).attr('title','To');
                    $("#from_1_"+j).find("option:selected").attr("title","From");

但以上代码都没有帮助我将选择下拉列表的标题设置为“来自”并将上午 8 点删除为选定选项。

请帮忙？

标签： javascriptjquery

解决方案

在你可以选择你想要的值之前，你需要有你想要的标题选项，所以它就像空值一样工作：

$('button').click(function() {
  $('select').val(null);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control kt-selectpicker" id='from_1_0' name='from_1_0'  title="From"> 
    <option value>From</option>
    <option selected value="7">7 am</option>
    <option  value="8">8 am</option>
    <option  value="9">9 am</option>
    <option  value="10">10 am</option>
    <option  value="11">11 am</option>
    <option  value="12">12 pm</option>
</select>
<button>reset</button>

如果您没有该选项，您可以动态添加它：

var select = $('select');
var empty = select.attr('title');
select.prepend('<option value>' + empty + '</option>');

$('button').click(function() {
  $('select').val(null);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control kt-selectpicker" id='from_1_0' name='from_1_0'  title="From">
    <option selected value="7">7 am</option>
    <option  value="8">8 am</option>
    <option  value="9">9 am</option>
    <option  value="10">10 am</option>
    <option  value="11">11 am</option>
    <option  value="12">12 pm</option>
</select>
<button>reset</button>

如果您希望这些 From 成为默认值，只需将 select 添加到该选项中，无论是静态的还是动态的。

推荐阅读