Question

我正在添加HTML / Javascript小工具并添加代码：

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');
 });

下拉菜单似乎随之显示，但功能却没有。我在同一个小工具中添加了HTML和Javascript代码。我还尝试在HTML编码的正文/头部分添加Javascript代码，但是：（

Answer 1

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

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

Answer 2

请确保您已包含所有必需的文件，或者您可能需要重新安排代码，如：

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

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

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

希望这有帮助！

Answer 3

使用它，它会起作用。你的错误是你试图用控制选择$（＆＃34; .selectpicker＆＃34;）。它将选择具有数组格式的类selectpicker的所有元素。要修复此问题，请在控件上放置ID，使用该id设置值。 ID将是唯一的

public static void main(String[] args)
{
    Display display = Display.getDefault();
    final Shell shell = new Shell(display);
    shell.setText("StackOverflow");
    shell.setLayout(new FillLayout());

    final Tree tree = new Tree(shell, SWT.NONE);

    for (int i = 0; i < 10; i++)
    {
        TreeItem item = new TreeItem(tree, SWT.NONE);
        item.setText("Parent " + i);

        for (int j = 0; j < 3; j++)
        {
            TreeItem child = new TreeItem(item, SWT.NONE);
            child.setText("Child " + i + " " + j);

            for (int k = 0; k < 3; k++)
            {
                TreeItem grandChild = new TreeItem(child, SWT.NONE);
                grandChild.setText("Child " + i + " " + j + " " + k);
            }
        }
    }

    final Menu menu = new Menu(tree);
    tree.setMenu(menu);
    tree.addMenuDetectListener(new MenuDetectListener()
    {
        @Override
        public void menuDetected(MenuDetectEvent e)
        {
            TreeItem treeItem = tree.getSelection()[0];

            e.doit = getLevelOfItem(treeItem) < 2;
        }
    });
    menu.addMenuListener(new MenuAdapter()
    {
        public void menuShown(MenuEvent e)
        {
            TreeItem item = tree.getSelection()[0];

            setMenu(menu, item);
        }
    });

    shell.pack();
    shell.open();
    while (!shell.isDisposed())
    {
        if (!display.readAndDispatch())
            display.sleep();
    }
    display.dispose();
}

private static void setMenu(Menu menu, TreeItem item)
{
    int level = getLevelOfItem(item);

    MenuItem[] items = menu.getItems();
    for (MenuItem i : items)
    {
        i.dispose();
    }

    switch (level)
    {
        case 0:
            for(int i = 0; i < 2; i++)
            {
                MenuItem newItem = new MenuItem(menu, SWT.NONE);
                newItem.setText("Menu item " + i);
            }
            break;
        case 1:
            for(int i = 0; i < 4; i++)
            {
                MenuItem newItem = new MenuItem(menu, SWT.NONE);
                newItem.setText("Menu item " + i);
            }
            break;
    }
}

private static int getLevelOfItem(TreeItem item)
{
    int counter = 0;

    while(item.getParentItem() != null)
    {
        item = item.getParentItem();
        counter++;
    }

    return counter;
}

JS会是这样的。

<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>

Bootstrap Selectpicker无法在Blogger上运行

3 个答案: