javascript - Jquery，从下拉列表中删除选项不起作用

Question

我对此做了很多研究，但我尝试的任何方法都不起作用。我觉得我一定错过了一些东西，但我无法弄清楚。我希望有人能够阐明我的问题。

我有一个来自数据库查询的 XML 变量。该 xml 是从我一直使用的 js 包含文件编码的，该文件从 DB 文件中提取数据。如果需要的话我可以调整 xml 输出(如果这是解决方案)。基本上，查询从数据库中提取 header 并将其解析为 XML，以便我可以在下拉列表中使用它(以及稍后的其他功能)。 xml 如下所示:

<?xml version="1.0" encoding="utf-8"?>
<recordset>
<record><ID>1</ID><Name>Cell
</Name></record><record><ID>2</ID><Name>Column                                         
</Name></record><record><ID>3</ID><Name>Xval                      
</Name></record><record><ID>4</ID><Name>Yval                              
</Name></record><record><ID>5</ID><Name>ColumnID(XXYY)                       
</Name></record><record><ID>6</ID><Name>Lift                              
</Name></record><record><ID>7</ID><Name>CellIndex(XXYYZZ)                    
</Name></record><record><ID>8</ID><Name>10-1997                              
</Name></record><record><ID>9</ID><Name>11-1997                              
</Name></record><record><ID>10</ID><Name>12-1997                              
</Name></record>
</recordset>

还有更多条目(总共 255 个)，都是类似日期的值(存储为文本)。出于我的目的，我想使用以下代码将它们添加到下拉列表中: (tval是上面存储的xml数据)

ps_data=tval;
var ps = $('#dropDownDest');
    $('Name', ps_data).each(function () {
        $('<option />', {
            text: $(this).text(),
            value: $(this).attr('ID')
        }).appendTo(ps);

    });

我想删除前 7 个条目并仅保留日期。我已经尝试了很多方法，但没有一个有效。我认为这与 xml 中没有“值”有关。这是我用来尝试删除选项的代码:

$("#dropDownDest option[value='1']").remove(); 

$("#dropDownDest option[value='Cell']").remove();

$("#dropDownDest)> option:eq(0)").remove();

我还尝试了省略“值”部分并尝试“ID”、“类”、“标题”和“标签”的变体。

对此的任何帮助将不胜感激!谢谢!

Answer 1

如果您想删除前 7 个条目，请尝试

$("#dropDownDest option").slice(0, 7).remove();

value 属性选择器可能无法工作，因为属性值可能包含一些附加字符或其他内容。

<小时/>

更好的是，不要首先添加它们

var xml = '<?xml version="1.0" encoding="utf-8"?> <recordset> <record><ID>1</ID><Name>Cell </Name></record><record><ID>2</ID><Name>Column                                          </Name></record><record><ID>3</ID><Name>Xval                       </Name></record><record><ID>4</ID><Name>Yval                               </Name></record><record><ID>5</ID><Name>ColumnID(XXYY)                        </Name></record><record><ID>6</ID><Name>Lift                               </Name></record><record><ID>7</ID><Name>CellIndex(XXYYZZ)                     </Name></record><record><ID>8</ID><Name>10-1997                               </Name></record><record><ID>9</ID><Name>11-1997                               </Name></record><record><ID>10</ID><Name>12-1997                               </Name></record> </recordset>';
ps_data = $.parseXML(xml);
var ps = $('#dropDownDest');
$('Name', ps_data).slice(7).each(function(i) {
  $('<option />', {
    text: $(this).text(),
    value: $(this).prev('ID').text()
  }).appendTo(ps);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="dropDownDest"></select>

--- 您的 value 属性选择器不起作用，因为 ID 不是 Name 的属性，它是其前一个同级属性，因此

var xml = '<?xml version="1.0" encoding="utf-8"?> <recordset> <record><ID>1</ID><Name>Cell </Name></record><record><ID>2</ID><Name>Column                                          </Name></record><record><ID>3</ID><Name>Xval                       </Name></record><record><ID>4</ID><Name>Yval                               </Name></record><record><ID>5</ID><Name>ColumnID(XXYY)                        </Name></record><record><ID>6</ID><Name>Lift                               </Name></record><record><ID>7</ID><Name>CellIndex(XXYYZZ)                     </Name></record><record><ID>8</ID><Name>10-1997                               </Name></record><record><ID>9</ID><Name>11-1997                               </Name></record><record><ID>10</ID><Name>12-1997                               </Name></record> </recordset>';
ps_data = $.parseXML(xml);
var ps = $('#dropDownDest');
$('Name', ps_data).each(function(i) {
  $('<option />', {
    text: $(this).text(),
    value: $(this).prev('ID').text()
  }).appendTo(ps);
});

$("#dropDownDest option[value='1']").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="dropDownDest"></select>