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

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>

因此，选择标签没有 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);

你可以让 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