0

I am adding the HTML/Javascript Gadget and adding the code:

HTML

<strong>OPTION 1</strong>

<select class="selectpicker" name="number">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<br />
<strong>OPTION 2</strong>

<select class="selectpicker" name="abc">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
    <option value="5">E</option>
</select>

Javascript

$('.selectpicker').selectpicker({
     style: 'btn-info',
     size: 4
 });

 $('.selectpicker').on('change', function () {
     var opValue = $(this).val();
     console.log(opValue);
     $('.selectpicker').val(opValue);
     $('.selectpicker').selectpicker('refresh');
 });

Dropdowns seem to be getting displayed with this but the functionality is not. I am adding both HTML and Javascript code in the same gadget. I also tried adding the Javascript code in the body/head section of the HTML Coding, but :(

4

3 回答 3

0

我认为应该是这样的。试试下面的一个。

 $('.selectpicker').on('change', function () {
     var opValue = $('.selectpicker option:selected').val();
     console.log(opValue);
     $('.selectpicker').val(opValue);
     $('.selectpicker').selectpicker('refresh');
 });
于 2016-08-30T07:28:15.857 回答
0

请确保您包含了所有必需的文件，否则您可能需要重新排列代码，例如：

<script src="/js/Bootstrap/Select/bootstrap-select.js"></script>

<script type="text/javascript">
    $('.selectpicker').selectpicker({
      });
</script>

您需要先包含 bootstrap-select.js，然后调用插件函数。

希望这可以帮助！

于 2016-08-30T07:29:04.490 回答
0

使用这个，它会起作用的。您的错误是您尝试使用控件 $(".selectpicker") 进行选择。它将选择数组格式中具有类 selectpicker 的所有元素。要解决此问题，请将 ID 放在控件上，使用该 ID 设置值。ID 将是唯一的

<strong>OPTION 1</strong>

<select class="selectpicker" name="number">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<br />
<strong>OPTION 2</strong>

<select class="selectpicker" id="idSelect" name="abc">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
    <option value="5">E</option>
</select>

JS会是这样的。

 $('.selectpicker').selectpicker({
     style: 'btn-info',
     size: 4
 });

 $('.selectpicker').on('change', function () {
     var opValue = $(this).val();
     console.log(opValue);
     $('#idSelect').val(opValue);
     $('.selectpicker').selectpicker('refresh');
 });
于 2016-08-30T09:02:40.180 回答