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.

正如您所看到的，国家/地区下拉菜单呈现正常，但状态下拉菜单将其选项加载到错误的部分！我甚至无法选择州，所以我不能说城市下拉菜单是什么样的。

知道这里会发生什么。如果我能提供更多细节，请告诉我。

谢谢！ -Greg

编辑：我知道你不应该为WordPress网站的html做脚本标签，但我不认为这是造成问题的原因。当我不是一个菜鸟时，我会更好地做到这一点。

编辑1/16/17：好的，似乎问题源于与bootstrap-select.min JS和CSS文件的某些不兼容性。我正在使用两者的最新版本。知道我可以改变这些内容以使我的数据汇集到正确的html元素中吗？

Answer 1

class =“countries”
类= “状态”
类= “城市”

这三个类没有定义，你必须查看你的文件并检查定义了这个类的.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，这个

HTML + CSS + JQUERY

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标记而不是类标记，从而解决了这个问题。这照顾了“溢出”的菜单内容。接下来，我必须弄清楚为什么<select>选项没有被bootstrap转换为<li>。虽然花了一段时间才找到解决方案，但这个解决方案非常简单。我只需要刷新下拉菜单的内容。我通过在传播新选项的任何实例之后添加$('#id').selectpicker('refresh');代码来完成此操作。希望将来有人可以从中找到一些用途！

在下拉菜单

2 个答案: