Question

我的JS调用我的数据，它非常适合构建动态3级选择菜单

我更改了类别选择选项的文本并且它也正常工作..现在我必须重新排序ma选择列表，而不是选项值，但使用alpha文本顺序。

我的JS：

if (window.XMLHttpRequest) {
oXmlhttp = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
 oXmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 }

 function selectManufacturer(id) {
 document.getElementById('subcategory').innerHTML = "";
 oXmlhttp.open('POST',"recherche-listesderoulantes-resultats.php");
 oXmlhttp.onreadystatechange=function() {
 if (oXmlhttp.readyState==4 && oXmlhttp.status == 200) {
 leselect = oXmlhttp.responseText;
 document.getElementById('category').innerHTML = leselect;
 }


 var strMessage1 = document.getElementById("category") ;
 strMessage1.innerHTML = strMessage1.innerHTML
 .replace('option   value="13446">XXXXX</option>','<option value="13446">NEW TEXT 1</option>')
 .replace('option value="13449">YYYYY</option>','<option value="13449">NEW TEXT 2</option>');
 }
  oXmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 var data = 'q=m&id='+id;
 oXmlhttp.send (data);
 }
 function selectCategory(manufacturer,category) {
 oXmlhttp.open('POST',"recherche-listesderoulantes-resultats.php");
 oXmlhttp.onreadystatechange=function() {
 if (oXmlhttp.readyState==4 && oXmlhttp.status == 200) {
 leselect = oXmlhttp.responseText;
 document.getElementById('subcategory').innerHTML = leselect;
 }
 }
 oXmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 var data = 'q=c&manufacturer='+manufacturer+'&id='+category;
 oXmlhttp.send (data);

我的HTML

 <form method="get" action="recherche-listesderoulantes-resultats.php">
  <select style="width: 80%" id="manufacturers_id" name="manufacturers_id" onchange="selectManufacturer(this.value);">
 <option value='-1'>Select</option>
 <option value="1739" >Brand</option><option value="5794" >Brand 1</option>$<option      value="1753" >Brand 2</option></select>
 <div id='category' style='display:inline'>
 </div>
 <div id='subcategory' style='display:inline'>
 </div>
 </form

现在一切都还可以，但是我试着理解如何在替换var之后用文本alpha值而不是value选项创建类别列表的新顺序...

谢谢!!!

Answer 1

虽然您无法对元素使用JavaScript排序，但您可以从选项元素的文本创建数组，然后重置选项元素的文本，如下所示：

var sel = document.getElementById('manufacturers_id');
var asel = [];
for (var i=1; i<sel.length; i++) { //omit Select
  asel.push(sel[i].text);
}
asel.sort()
for (var j=0; j < asel.length;j++) {
    sel[j+1].text = asel[j];
    alert(sel[j+1].text);
}

请参阅jsfiddle注意我将品牌1文字更改为品牌3，以说明选择下拉菜单反映了新的排序顺序。

Javascript命令选择列表按文字alphe而不是值

1 个答案: