Question

我正在使用Wordpress，我编写了一个加载jQuery源文件的插件。我的网站有一个下拉列表，HTML代码如下所示：

<form method="get" action="http://siradjov.anex.at/playground/">
    <div class="form-inner">   
       <div class="listing-search-main">
            <input type="text" class="listing-search-text text" name="s" title="Coach House, Golf Course, Water View, etc" value="unique">
            <input type="submit" class="listing-search-submit btn btn-large btn-primary" name="search-submit" value="Search">
            </div><!-- .listing-search-main -->

       <div class="listing-search-details">
           <div class="listing-search-field listing-search-field-select listing-search-field-status">
           <select class="listing-search-status select" name="status">
              <option value="">Status</option>
              <option value="sale">Sales</option>
              <option value="rent">Rentals</option>
              <option value="foreclosure">Foreclosure</option>
           </select>

      <div class="listing-search-advanced " style="display: block;">
          <div class="listing-search-field listing-search-field-select listing-search-field-min">
           <select class="listing-search-min select" name="min">
              <option value="">Price (min)</option>
              <option value="100000">100.000</option>
              <option value="200000">200.000</option>
              <option value="300000">300.000</option>
              <option value="400000">400.000</option>
           </select>

因此，select标签没有id，我不允许添加id，因为它是动态生成的。因此，我选择它的唯一方法是类名。

现在我要删除下拉框中的所有选项，并在其中插入其他选项。

这是我尝试过的但它不起作用：

jQuery(document).ready(function() {

    $(".listing-search-min select[name='min']")
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever');
});

我不确定，但我认为通过提供错误的班级名称会造成错误。

Answer 1

如果您想根据代码进行更新，请尝试使用此功能：

jQuery(document).ready(function($) { // pass the $ as arg in the callback
   var $select = $(".listing-search-min.select[name='min']");
   $select 
   .find('option')
   .remove();

   $select 
   .append('<option value="whatever">text</option>');
});

您的代码问题：

$(".listing-search-min select[name='min']") // this selector is wrong due to space
.find('option')
.remove()
.end() // when you use end it get back to selector again and in your case your selector was "option" not the select
.append('<option value="whatever">text</option>') // you are appending an option here with values so
.val('whatever'); // you dont need to set/select the value here

Answer 2

 $(".listing-search-min select[name='min']")
                       ^------- Extra space

应该是

 $(".listing-search-min.select[name='min']")

如果您尝试使用select元素而不是类，那么它应该是

 $("select[name='min'].listing-search-min")

Answer 3

假设你只有1个名字属性为'min'的选择...试试这个：

// remove all the options
$("select[name='min']").html("");

// add something new
var tOpt = "<option value='1'>1.0</option>";
$("select[name='min']").html(tOpt);

你可以制作一些包含你想要的所有物品的字符串。

Answer 4

试试这个：

$(document).ready(function() {
    $("select[name='min'].listing-search-min").html('<option value="whatever">text</option>').val('whatever');
});

Answer 5

好吧，好像我在noConflict模式下使用jQuery，我在这篇文章Why isn't my jQuery .Change being triggered?中尝试了这个建议。

现在这段代码有效：

jQuery(document).ready(function() {

var $select = jQuery(".listing-search-min.select[name='min']");
 $select.find('option').remove();

 $select.append('<option value="whatever">text</option>');
});

我所要做的就是使用jQuery代替$。

感谢您的帮助！欣赏它！

Answer 6

 $("select[name='min']").html(""); //delete everything
 $("select[name='min']").append("<option value="whatever">text</option>");//add the new option

如何删除选择选项并使用类名称添加jQuery新选项

6 个答案: