Question

我是编程的新手。我知道html，css，javascript和php的基础知识。我想在不使用HTML的情况下做出选择选项，因为据我所知，您不能对选择器的内部设置太多样式。

所以我希望您可以使用javascript进行类似的操作。我想选择一个日期，就像这个网站要保留的日期一样：https://www.bookatable.co.uk/stockholm-restaurants

对于我在他们的代码中看到的，他们正在使用列表，因此他们必须使用某种代码来完成选择选项样式。

感谢您的帮助：）

Answer 1

您可以使用Bootstrap Select Plugin。该插件需要Bootstrap和jQuery。要初始化此插件，请使用jQuery（select）获得$(selector)元素，然后使用.selectpicker()方法。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.0-beta/js/bootstrap-select.min.js"></script>
  <select class="selectpicker">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
  <option>Option 6</option>
  <option>Option 7</option>
  <option>Option 8</option>
  </select>
  <script>
  $('.selectpicker').selectpicker();
  </script>

Answer 2

您可以创建一个列表，其中包含用于触发Javascript设置选项的链接。

var select = document.getElementById('hidden-select');
var custom_options = document.getElementsByClassName('custom-option');

for (i = 0; i < custom_options.length; i++) {
  custom_options[i].addEventListener('click', function(e) {
      e.preventDefault();
      var value = this.getAttribute('data-value');
      select.value = value;
  });
}

.hidden-select {
    display: none;
}

<select class="hidden-select" id="hidden-select">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<ul class="custom-select">
  <li><a class="custom-option" href="#" data-value="1">1</a></li>
  <li><a class="custom-option" href="#" data-value="2">2</a></li>
</ul>

Answer 3

如果我可以清楚地了解您，则您希望元素具有非常甜美和酷的设计，因为选择选项可能无法满足您的需求。您可以使用 javascript 和其他您熟悉的 element 来根据需要进行设计。

<i onclick="optionSelect('1');">Your preferred element here 1</i>
<i onclick="optionSelect('2');">Your preferred element here 2</i>
<i onclick="optionSelect('3');">Your preferred element here 3</i>
<i onclick="optionSelect('4');">Your preferred element here 4</i>

<javascript>

var selectedOption = '0';

function optionSelect(sel){
selectedOption = sel;
}

</javascript>

您还可以更改触发该功能的元素的颜色。...

上面的代码在通过ajax或任何js框架提交表单时非常完美。

但是，如果要在表单中使用它，则可以隐藏表单选项元素并在其单击时更改其值

Answer 4

您可以自己创建一个新组件。在这种情况下，您将控制它们的所有行为。并且必须控制所有元素，事件和布局。

<div id="my-element">
  <input class="visible_field" type="text"/>
  <ul class="list_of_options" hidden>
    <li class="option" option-value="value">Option1</li>
  </ul>
</div>

如何在不使用HTML的情况下进行选择？

4 个答案: