亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在文本字段中獲取多個選擇框的選定值。我正在使用select js庫

如何在文本字段中獲取多個選擇框的選定值。我正在使用select js庫

一只斗牛犬 2022-01-20 20:47:16
我想在文本字段中獲取多個選擇框的值。這是我的代碼。如您所見,我正在使用其他第三方 JS 庫來使選擇框可搜索和下拉,盡管它是一個多選框。出于這個原因,我用來獲取所選選項值的 javascript 沒有進入文本字段。<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script><form method="post" action=""><div class="form-group">    <label for="autoform-company-name"><b>Which Industries do you wish to receive alerts about?</b></label>    <select multiple class="selectpicker" id="autoform-sector" name="autoform-sector" style="height: 10px; overflow-y: scroll;"  data-live-search="true">                    <option value="Code 01110 ">Code 01110 </option>                    <option value="Code 01120 ">Code 01120 </option>                    <option value="Code 01130 ">Code 01130 </option>                    <option value="Code 97000 ">Code 97000 </option>                    <option value="Code 98100 ">Code 98100 </option>        </select></div><div class="form-group"><input type="text" class="form-control" id="sector" name="sector" ></div>           </form>     <script type="text/javascript">    var sel = document.getElementsById ('autoform-sector')[0];    sel.onclick = function () {    document.getElementsById ('sector')[0].value += this.value + ' ';}</script>我已經看到這個問題通過單擊多選框中的項目添加到 HTML 文本字段 并嘗試使用此解決方案。http://jsfiddle.net/wDJLW/1/但是這個解決方案對我不起作用。因為我正在使用另一個 java-script 庫來使選擇框可搜索如何使它工作這是我的代碼
查看完整描述

2 回答

?
白衣染霜花

TA貢獻1796條經驗 獲得超10個贊

jquery您也可以通過


$("#autoform-sector").on('change',function(){

    $("#sector").val($(this).val());

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>


<form method="post" action="">


  <div class="form-group">

    <label for="autoform-company-name"><b>Which Industries do you wish to receive alerts about?</b></label>

    <select multiple class="selectpicker" id="autoform-sector" name="autoform-sector" style="height: 10px; overflow-y: scroll;" data-live-search="true">

      <option value="Code 01110 ">Code 01110 </option>

      <option value="Code 01120 ">Code 01120 </option>

      <option value="Code 01130 ">Code 01130 </option>

      <option value="Code 97000 ">Code 97000 </option>

      <option value="Code 98100 ">Code 98100 </option>

    </select>

  </div>


  <div class="form-group">

    <input type="text" class="form-control" id="sector" name="sector">

  </div>

</form>


查看完整回答
反對 回復 2022-01-20
?
Helenr

TA貢獻1780條經驗 獲得超4個贊

首先,您的代碼是錯誤的,因為

  • 它是“GetElementById”而不是“元素”,因為 ID 應該是單獨的,同一頁面中永遠不會有 2 個相同的 id,所以不需要 [0]

  • getElementById 之后沒有空格: var sel = document.getElementById('autoform-sector');

  • 事件不是 onclick 而是 onchange

在這里為你:)

    var sel = document.getElementById('autoform-sector')

    sel.onchange = function () {

    document.getElementById('sector').value += this.value + ' ';

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>


<form method="post" action="">


<div class="form-group">

    <label for="autoform-company-name"><b>Which Industries do you wish to receive alerts about?</b></label>

    <select multiple class="selectpicker" id="autoform-sector" name="autoform-sector" style="height: 10px; overflow-y: scroll;"  data-live-search="true">

                    <option value="Code 01110 ">Code 01110 </option>

                    <option value="Code 01120 ">Code 01120 </option>

                    <option value="Code 01130 ">Code 01130 </option>

                    <option value="Code 97000 ">Code 97000 </option>

                    <option value="Code 98100 ">Code 98100 </option>

        </select>

</div>


<div class="form-group">

<input type="text" class="form-control" id="sector" name="sector" >

</div>           

</form>      


查看完整回答
反對 回復 2022-01-20
  • 2 回答
  • 0 關注
  • 290 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號