如何使用Bootstrap組合框的選定值

我正在使用https://github.com/danielfarrell/bootstrap-combobox/的插件使用自動完成製作一個漂亮的搜索框。如何使用Bootstrap組合框的選定值

但是，如何獲得所選的值？

這是HTML代碼：

<div class = "form-group"> 
    <label>Select your name</label> 
    <div class="combobox-container"> 
     <select class="combobox input-large form-control" id="search_yourself"> 
      <option></option> 
      <?php 
       for($row = 0; $row < sizeof($race_table); $row++){ 
       echo("<option value=".$race_table[$row]['Name'].">". 
       $race_table[$row]['Name']."</option>"); 
       } 
      ?> 
     </select> 

     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $('#search_yourself').combobox(); 
      }); 
     </script> 
    </div> 
</div>

我象

$('#search_yourself').change(function() { 
    alert($(this).text()); 
});

但不是text()尋找的東西（它返回我所有的選項，而不是隻對選定的一個）我需要選擇的選項。

來源

2015-03-31 Kasper Van Lombeek

夫婦筆記找屬性 '名稱' 的值：''應該有一個'值= 「」'屬性，避免使用'警報（。 ..）;'用於調試。嘗試使用'console.log（...）;' – 2015-03-31 19:59:03

這些筆記表示讚賞，我沒有開發人員背景，所以所有的幫助是值得歡迎的。 – 2015-03-31 20:00:54

沒問題！另外，你知道如何使用瀏覽器的開發工具嗎？ Chrome或Firefox中的'F12'，在這種情況下，您需要'Console'選項卡以查看任何'console.log（...）;'語句。 – 2015-03-31 20:02:01

嘗試：

$('#search_yourself').change(function() { 
      alert($('#search_yourself option:selected').text()); 
});

來源

2015-03-31 19:49:00 serek

也不管用 – 2015-03-31 19:51:35

提醒它不起作用，但與console.log這工作！ – 2015-03-31 20:05:50

@KasperVanLombeek現在做了log'「」'然後''選擇值「'（或者其他值）還是僅僅是我？ – 2015-03-31 20:11:08

$('#search_yourself').change(function() { 
      alert($(this).val()); 
    });

來源

2015-03-31 19:55:33 Banik

這也行不通。有沒有可能發生另一個事件而不是我應該使用的改變？ – 2015-03-31 19:57:48

試試這個：

$('#search_yourself').change(function() { 
     alert("Value:" + $(this).val()); 
     alert("Text:" + $(this).find(":selected").text()); 
    });

來源

2015-03-31 20:06:47 Lodim

庫增加了一個隱藏的輸入具有相同的 '名稱' 屬性像原來的選擇。該輸入由庫更新，以便通過'name'屬性選擇此輸入以獲得所需的選項值。

<select id="add-holiday" class="custom_holiday" name="add-holiday"> 
<option value="">Enter Holiday</option> 
<option value="1">President's Day</option> 
<option value="2">Christmas</option> 
<option value="3">Memorial Day</option> 
</select>

（通過jQuery）

$("input[name='add-holiday']").val();

來源

2017-06-28 07:45:40 Ruwen

如何使用Bootstrap組合框的選定值

回答

相關問題