Question

我已经做过很多关于这样做的研究，而我尝试的都没有。我觉得我必须遗漏一些东西，但我无法弄明白。我是一个人，可以解释我的问题。

我有一个来自数据库查询的XML变量。这个xml是从我正在使用的js包含文件中编码的，该文件从数据库文件中提取数据。如果需要，我可以调整xml输出（如果这是解决方案）。基本上，查询从DB中提取标头并将其解析为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没有“＆＃39;值”有关。在里面。以下是我用来尝试删除选项的代码：

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

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

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

我也尝试过各种变化而忽略了“价值”。部分并尝试ID＆＃39;，＆＃39; class＆＃39;，＆＃39; title＆＃39;和＆＃39;标签＆＃39;。

对此有任何帮助将不胜感激！谢谢！

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>

Answer 2

首先，提示：

不是在每次迭代中附加到父对象，而是使用documentFragment来保存新的子对象，然后追加到父对象，它将提高代码的性能，也是一个很好的实践。

其次，你的xml数据有一个'record'列表，这个'record'包含'Name'和'ID'，但你循环'Name'，所以'Name'不包含'id'。你必须循环'记录'，然后获得两个孩子：'名称'和'ID'文本填充选项，这就是选择器'选项[value =“5”]'无法工作的原因，因为选项本身可以没有任何价值。你可以在http://jsfiddle.net/wjkq77gf/1/

看到它

ps_data=tval;
var ps = $('#dropDownDest')
, fragment = document.createDocumentFragment();

$('record', ps_data).each(function ( i, obj ) {

    $('<option />', {
            text: $( 'Name', obj ).text(),
            value: $('ID', obj ).text()
     }).appendTo(fragment);
 });

ps.append( fragment );

console.log(ps.find('option[value="5"]').remove());

Jquery，从下拉列表中删除选项无法正常工作

2 个答案: