下拉菜单选项在下拉菜单之外渲染

Question

我正在定制一个WordPress主题，现在我正在尝试包括一系列条件下拉菜单，允许用户选择他们的国家、州和城市。以下html代码在一般的在线模拟器中运行良好，但当我在WordPress主题中使用它时，第二个下拉菜单中的选项呈现在下拉菜单之外。

代码如下：

<select name="country" class="countries" id="countryId">
  <option value="">Select Country</option>
</select>
<select name="state" class="states" id="stateId">
  <option value="">Select State</option>
</select>
<select name="city" class="cities" id="cityId">
  <option value="">Select City</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="[script]"></script>

Here is a screenshot of how it appears with dev tools open on my site

和

here is a screenshot of how it appears with dev tools open on an html simulator site.

如您所见，country下拉菜单呈现良好，但state下拉菜单的选项加载到了错误的部分！我甚至不能选择一个州，所以我不能说城市下拉菜单是什么样子的。

这到底是怎么回事？

编辑1

我知道你不应该在WordPress站点的超文本标记语言中做脚本标记，但我不认为这是导致问题的原因。当我不是一个初学者时，我会抽出时间把这一切做得更好。

编辑2

好的，看起来问题的根源在于与bootstrap-select.min JS和CSS文件的不兼容。我使用的是这两个版本的最新版本。你知道我可以做些什么来让我的数据进入正确的html元素吗？

Answer 1

1. class="countries“
2. class="states"
3. class="cities"

这三个类没有定义，你必须查看你的文件并检查定义了这些类的.css文件，然后你才能尝试它。你没有任何类型的样式，在本例中只有html。

我给你举一个如何使用css和html的例子。

仅限HTML

​

<h1>Hi, let's learn it</h1>

​

但是，只要添加一个类，或者只是设置h1的样式，它就会是这样的

HTML + CSS

​

h1{
  text-align:center;
  background:#dfdfdf;
  margin:auto;
  text-transform:uppercase;
  font-size:72px;
  font-family:'Verdana';
  padding:30px;
}

<h1>Hi, let's learn it</h1>

​

更多，添加一个jQuery，这

JQUERY HTML+ CSS +

​

jQuery(document).ready(function(){
   $('h1').mousemove(function(e){
     var rXP = (e.pageX - this.offsetLeft-$(this).width()/2);
     var rYP = (e.pageY - this.offsetTop-$(this).height()/2);
     $('h1').css('text-shadow', +rYP/10+'px '+rXP/80+'px rgba(227,6,19,.8), '+rYP/8+'px '+rXP/60+'px rgba(255,237,0,1), '+rXP/70+'px '+rYP/12+'px rgba(0,159,227,.7)');
   });
});

h1{
   text-align:center;
  background:#dfdfdf;
  text-transform:uppercase;
  font-size:72px;
  font-family:'Verdana';
  padding:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hi, let's learn it</h1>

​

我希望你能理解这个概念

Answer 2

这就是问题所在: bootstrap-select.min.js渗透了我的countries、states和cities类标记，直到第一个插入的html元素，这意味着我自己的脚本输出的结果在<div>和<select>元素中重复出现。为了解决这个问题，我在主JavaScript文件中使用$('#id')而不是$('.class')来定位元素id标记，而不是类标记。解决了“溢出”的菜单内容。接下来，我必须弄清楚为什么bootstrap不能将<select>选项转换为<li>。解决方案，虽然花了一段时间才找到，但非常简单。我只需要刷新下拉菜单的内容。为此，我在传播新选项的任何实例后添加了$('#id').selectpicker('refresh');代码。希望将来有人能从中发现一些有用的东西！