Question

我已经在blog中选择了jquery。问题是我已将代码<select id="cmbColumn" name="cmbColumn">更改为 <select class="chosen-select" name="chosen-select">

我已经分配了这个类，因为要实现类似下面的

<script>
  $(function(){
    $(".chosen-select").chosen(); 
});
</script>

但问题是该值未过滤，因为该类未按ID document.getElementById("chosen-select").value;

进行

<script type="text/javascript">
function getValue() {
     var valchosen-select = document.getElementById("chosen-select").value;
     var valcmbSidebar = document.getElementById("cmbSidebar").value;

    valOutput = "label:"+valchosen-select+"|label:"+ valcmbSidebar;
    window.open("/search/?q=" + valOutput, "_self");
  }
</script>

我可以将id和class赋予相同的选择选项，例如下面<select class="chosen-select" id="chosen-select" name="chosen-select">它是否有效或任何其他解决方案。

Answer 1

您可以使用与ID相同的类名，但我不推荐它 - 代码中的ID必须是唯一的，并且类名不是必须的。

如果删除了id属性，则无法使用getElementById并查询DOM。相反，使用getElementsByClassName - 请注意这将返回一个集合，因此假设您只有一个具有此类名的元素，则需要使用getElementsByClassName("chosen-select")[0].value。

Answer 2

.chosen()不是标准的jQuery方法，而是来自 plugin 。
该插件有2个<script>个标签。其中一个不起作用，请参阅 fig1。。
<option>标签应该关闭，请参阅 fig2。。
正如Gel Boy先生已经说过：避免 hyphenating variables 。连字符 - 将混淆为减去 - 。
正如先生（女士？）charlietfl已经说过：使用 Chosen API 时不需要ID，请参阅 fig3。。

FIG1。

<script src="//harvesthq.github.io/chosen/chosen.jquery.js"></script>
<link href="//harvesthq.github.io/chosen/chosen.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>

注意顶部和底部的2个<script>块。该插件需要jQuery加载才能运行。此外，在这种情况下（在大多数常见实例中），您不需要加载2个相同的脚本。删除顶部。

Fig2。

WRONG: <option value="apple"/>Apple
CORRECT: <option value="apple">Apple</option>

图三。

$('.chosen-select').chosen();

这是正确的， BUT 在您的情况下，如果您使用camelCas e会更好：

$('.chosenSelect').chosen();

以下代码段使用所选插件显示单个和多个选择。我假设您的问题是您不知道或不知道如何使用插件，或者是因为带连字符的变量，所以简而言之：

将您选择的类设置为任意名称，不带任何 - ，并调用以该类名为目标的插件。不使用 - 保持变量简单。该插件将处理事件，并允许您执行其他需要大量工作和编码的事情。

段

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Chosen Plugin</title>
  <link href="https://harvesthq.github.io/chosen/chosen.css" rel="stylesheet">
  <style>
    fieldset {
      max-width: 300px;
      font-family: 'Verdana';
    }
    fieldset * {
      font-family: inherit;
    }
  </style>
</head>

<body>
  <fieldset>
    <legend>Chosen Plugin</legend>

    <b><label for="sel1">Single Select</label></b>
    <select id="sel1" class="chosenSelect" name="sel1" data-placeholder="Columns">
      <option value=""></option>
      <option value="apple+">Apple</option>
      <option value="berries+">Berries</option>
    </select>
    <br/>
    <br/>
    <b><label for="sel2">Multiple Select</label></b>
    <select id="sel2" class="chosenSelect" name="sel2" data-placeholder="Sidebars" multiple>
      <option value=""></option>
      <option value="grapes+">Grapes</option>
      <option value="mango+">Mango</option>
      <option value="pear+">Pear</option>
      <option value="cherries+">Cherries</option>
    </select>

    <input onclick="getValue()" value="Filter" type="button">
  </fieldset>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
  <script>
    function getValue() {
      var valchosenSelect = document.getElementById("sel1").value;
      var valcmbSidebar = document.getElementById("sel2").value;

      valOutput = "label:" + valchosenSelect + "|label:" + valcmbSidebar;
      window.open("https://blogupdatesmyme.blogspot.in/search/?q=" + valOutput, "_self");
    }

    $(function() {
      $(".chosenSelect").chosen({
        width: "95%"
      });
    });
  </script>
</body>

</html

如何在选择选项中同时选择id和class

2 个答案:

FIG1。

Fig2。

图三。

段