最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】Bootstrap中实现列表选择默认值和获取当前选中的值

CSS crifan 3864浏览 0评论

折腾:

【已解决】web前端添加参数允许传递参数到微软Azure的TTS语言合成接口中

需要去实现:

用bootstrap实现列表选择项,有个默认值,且能获取到当前所选中的值,以便于作为参数传递给后端api调用。

Getting started · Bootstrap

Components · Bootstrap

JavaScript · Bootstrap

https://getbootstrap.com/docs/3.3/components/#dropdowns

用:

<code>
            &lt;li class="list-group-item"&gt;
                &lt;h3 class="panel-title"&gt;Microsoft Azure TTS Voice Name&lt;/h3&gt;
                &lt;div class="dropdown"&gt;
                  &lt;button
                    class="btn btn-default dropdown-toggle"
                    type="button"
                    id="selectVoiceName"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="true"&gt;
                    Voice Name
                    &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;ul class="dropdown-menu" aria-labelledby="selectVoiceName"&gt;
                    &lt;li class="dropdown-header"&gt;English (US)&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;en-US, ZiraRUS&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;en-US, JessaRUS&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;en-US, BenjaminRUS&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;en-US, Jessa24kRUS&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;en-US, Guy24kRUS&lt;/a&gt;&lt;/li&gt;
                    &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
                    &lt;li class="dropdown-header"&gt;English (UK)&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;en-GB, Susan, Apollo&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;en-GB, HazelRUS&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;en-GB, George, Apollo&lt;/a&gt;&lt;/li&gt;
                    &lt;li role="separator" class="divider"&gt;&lt;/li&gt;  
                    &lt;li class="dropdown-header"&gt;English (Canada)&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;en-CA, Linda&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;en-CA, HeatherRUS&lt;/a&gt;&lt;/li&gt;
                    &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
                    &lt;li class="dropdown-header"&gt;English (Australia)&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;en-AU, Catherine&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;en-AU, HayleyRUS&lt;/a&gt;&lt;/li&gt;
                    &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
                    &lt;li class="dropdown-header"&gt;English (Ireland)&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;en-IE, Sean&lt;/a&gt;&lt;/li&gt;
                    &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
                    &lt;li class="dropdown-header"&gt;English (India)&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;en-IN, Heera, Apollo&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;en-IN, PriyaRUS&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;en-IN, Ravi, Apollo&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
            &lt;/li&gt;
</code>

得到要的效果:

但是接着需要去搞清楚,如何获得dropdown的value

bootstrap dropdown value

javascript – Get selected item value from Bootstrap DropDown with specific ID – Stack Overflow

javascript – Get selected text from bootstrap dropdown – Stack Overflow

jquery – Getting value from selected Bootstrap dropdown option – Stack Overflow

Bootstrap Dropdown Selected Value snippet – JHI6OtF0Yd

都是click事件获取的。

不过还是先要去设置默认值

bootstrap dropdown default value

javascript – Default selection in bootstrap dropdown – Stack Overflow

换用select更合适

Bootstrap Select Option Default Value | Treehouse Community

javascript – bootstrap dropdown select default value not working – Stack Overflow

[Solved] Bootstrap set default selected – CodeProject

然后用click事件,也基本上实现了我们要的效果:

默认值选中某一个,然后点击后,可以切换到所选的值:

代码:

<code>    function initDefaultAzureTtsConfig(){
        console.log("initDefaultAzureTtsConfig");

        // const defaultVoiceName = "en-US, JessaRUS";
        const defaultVoiceNameIdx = 1;
        $(".dropdown .dropdown-menu li a")[defaultVoiceNameIdx].click();

        // var liAList = $(".dropdown .dropdown-menu li a");
        // console.log("liAList=", liAList);
        // var defaultVoiceNameElt = liAList[1];
        // console.log("defaultVoiceNameElt=", defaultVoiceNameElt);
        // defaultVoiceNameElt.click();

        // $("#selectVoiceName").html(defaultVoiceName + ' &lt;span class="caret"&gt;&lt;/span&gt;');
    }

    $(".dropdown .dropdown-menu li a").click(function(e){
        console.log("Cliked: .dropdown .dropdown-menu li a");

        e.preventDefault(); // cancel the link behaviour
        var selText = $(this).text();
        // $("#selectVoiceName").text(selText);
        $("#selectVoiceName").html(selText + ' &lt;span class="caret"&gt;&lt;/span&gt;');

        var curSelVoiceNameText = $("#selectVoiceName").text();
        console.log("curSelVoiceNameText=", curSelVoiceNameText);
    });

    initDefaultAzureTtsConfig();
</code>

效果:

不过,为了逻辑上更明确,还是去改试select的方案

结果是:

<div class=”selectVoiceName”>

    <select class=”bootstrapSelect”>

      <option value=”en-US, ZiraRUS”>en-US, ZiraRUS</option>

      <option value=”en-US, JessaRUS” selected=”selected”>en-US, JessaRUS</option>

      <option value=”en-US, BenjaminRUS”>en-US, BenjaminRUS</option>

      <option value=”en-US, Jessa24kRUS”>en-US, Jessa24kRUS</option>

    </select>

</div>

虽然逻辑上更明确了,也可以自动初始化选中selected项,但是效果是:

css样式太难看-》需要研究bootstrap,借鉴其css过来

更主要的是:没有了header和divider,界面上看起来不够好

还是原先的好看:

所以暂时还是用bootstrap的dropdown吧。

【总结】

最后用bootstrap的dropdown实现了默认值和列表选择:

html

<code>
  &lt;li class="list-group-item"&gt;
      &lt;h3 class="panel-title"&gt;Microsoft Azure TTS Voice Name&lt;/h3&gt;
      &lt;div class="dropdown"&gt;
        &lt;button
          class="btn btn-default dropdown-toggle"
          type="button"
          id="selectVoiceName"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="true"&gt;
          Voice Name
          &lt;span class="caret"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;ul class="dropdown-menu" aria-labelledby="selectVoiceName"&gt;
          &lt;li class="dropdown-header"&gt;English (US)&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;en-US, ZiraRUS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;en-US, JessaRUS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;en-US, BenjaminRUS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;en-US, Jessa24kRUS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;en-US, Guy24kRUS&lt;/a&gt;&lt;/li&gt;
          &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
          &lt;li class="dropdown-header"&gt;English (UK)&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;en-GB, Susan, Apollo&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;en-GB, HazelRUS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;en-GB, George, Apollo&lt;/a&gt;&lt;/li&gt;
          &lt;li role="separator" class="divider"&gt;&lt;/li&gt;  
          &lt;li class="dropdown-header"&gt;English (Canada)&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;en-CA, Linda&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;en-CA, HeatherRUS&lt;/a&gt;&lt;/li&gt;
          &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
          &lt;li class="dropdown-header"&gt;English (Australia)&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;en-AU, Catherine&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;en-AU, HayleyRUS&lt;/a&gt;&lt;/li&gt;
          &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
          &lt;li class="dropdown-header"&gt;English (Ireland)&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;en-IE, Sean&lt;/a&gt;&lt;/li&gt;
          &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
          &lt;li class="dropdown-header"&gt;English (India)&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;en-IN, Heera, Apollo&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;en-IN, PriyaRUS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;en-IN, Ravi, Apollo&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/li&gt;

</code>

js:

<code>
    $(".dropdown .dropdown-menu li a").click(function(e){
        console.log("Cliked: .dropdown .dropdown-menu li a");

        e.preventDefault(); // cancel the link behaviour
        var selText = $(this).text();
        // $("#selectVoiceName").text(selText);
        $("#selectVoiceName").html(selText + ' &lt;span class="caret"&gt;&lt;/span&gt;');

        var curSelVoiceNameText = $("#selectVoiceName").text();
        console.log("curSelVoiceNameText=", curSelVoiceNameText);
    });

    function initDefaultAzureTtsConfig(){
        console.log("initDefaultAzureTtsConfig");

        // const defaultVoiceName = "en-US, JessaRUS";
        const defaultVoiceNameIdx = 1;
        $(".dropdown .dropdown-menu li a")[defaultVoiceNameIdx].click();
    }

    initDefaultAzureTtsConfig();
</code>

效果:

默认值:

选择:

选择后:

转载请注明:在路上 » 【已解决】Bootstrap中实现列表选择默认值和获取当前选中的值

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.183 seconds, using 22.13MB memory