Javascript从数组列表中获取特定值

时间：2017-10-05 01:04:10

标签： javascript html arrays 

<select name="List" id="List">
    <option value="">-Select-</option>
    <option value="">--Product--</option>
    <option value="">product1</option>
    <option value="">product2</option>
    <option value="">product3</option>
    <option value="">--Software--</option>
    <option value="">software1</option>
    <option value="">software2</option>
    <option value="">software3</option>
    <option value="">--Services--</option>
    <option value="">service1</option>
    <option value="">service2</option>
    <option value="">service3</option>
</select>

我的HTML选择字段中有上面的列表。

我希望能够只获得价值 - 产品 - ， - 软件 - ， - 服务 - 所以我创建了一个循环来抛出产品列表并使用方法startwith来拾取以“ - ”开头的值。

function loadFilter() {
  var x = document.getElementById('List');
  var i;
  var n;
  for (i = 0; i < x.length; i++) {
    str = x[i].text
    var n = str.startsWith('--');
    flag = true;
    if (n == true) {
      alert(x[i].text);   // list --Product--, --Software--, --Services--
      alert(x[3].text);   // prints from the LIST <product1> and not <--Services-->
    }
  }
}

因此，当该标志为真时，alert(x[i].text);正确列出值（ - Product - ， - Software - ， - Services - ）。

但是当我尝试通过它们的值（索引）来获取它们时，EG ..我只需要获取（--Services--），所以我使用x[3].text)，但这会返回整个List值＆GT;＆GT;而不是＆lt; - Services - ＆gt;。

7 个答案:

答案 0 :(得分：1)

您可以使用以下代码使用“ - ”选项列表填充数组arr。

然后，您可以使用arr[2]获取--Services--。

var arr = [];
[].slice.call(document.querySelectorAll("#List option")).map(function(el){
    if (el.text.indexOf("--") === 0) arr.push(el.text);
});

console.log(arr)
console.log(arr[2])
<select name="List" id="List">
    <option value="">-Select-</option>
    <option value="">--Product--</option>
    <option value="">product1</option>
    <option value="">product2</option>
    <option value="">product3</option>
    <option value="">--Software--</option>
    <option value="">software1</option>
    <option value="">software2</option>
    <option value="">software3</option>
    <option value="">--Services--</option>
    <option value="">service1</option>
    <option value="">service2</option>
    <option value="">service3</option>
</select>

答案 1 :(得分：0)

我仍然不完全确定你要做什么。 --Services--是索引9，而不是3.要获得--Services--，你需要x[9].text

如果你想将三个--xx--重新排列到他们自己的索引中，你需要将它们推入一个新的数组，如下所示：

var output = []
if (n === true) output.push(x[i].text)
console.log(output[2]) // --Services--

答案 2 :(得分：0)

你走了：

function loadFilter() {
    var element = document.getElementById('List');
    var children = element.children;
    var filtered = [];
    for (var i = 0; i < children.length; i++) {
        if (children[i].textContent.startsWith('--')) {
            filtered.push(children[i].textContent);
        }
    }
    return filtered;
}

重温一下这个功能：

  1. 获取元素“列表”
  2. 获取“List”的孩子
  3. 创建一个数组来保存通过过滤器的元素
  4. 浏览每个元素并添加与指定正则表达式相匹配的元素
  5. 返回通过过滤器的元素

答案 3 :(得分：0)

您可以使用简单的forEach循环来循环遍历此处的元素，但首先需要从DOM节点列表中创建数组：

<!DOCTYPE html>
<html>
    <head>
        <script>
            var Christmas = new Date ("December, 25, 2017");
            var toDay = new Date ();

            var then = Christmas.getTime();
            var now = toDay.getTime();
            var diff = (then-now)/(1000*60*60*24);

            document.writeIn ( " [Note: Get ready... There are only " + Math.round(diff) + " days until Christmas!] " );
        </script>
        <title>abc</title>
    </head>
    <body>
    </body>
</html>

我把它放在小提琴上，这样你就可以检查： https://jsfiddle.net/pegla/qokwarcy/

答案 4 :(得分：0)

首先，你根本没有看到过使用过你的旗帜。

如果我理解正确，你试图使用x[3].text来获取--Services--但是如果你计算整个列表，则索引[3]中的元素就是。您可以使用以下代码验证：

f (n == true) {
  alert('index '+ i + ': ' + x[i].text);   // list --Product--, --Software--, --Services--
}

您可以创建一个包含已过滤选项的新数组，然后使用已知索引访问该数组：

var filteredArray = [];
f (n == true) {
  filteredArray.push(x[i]); //insert the element in the new array.
}
alert(filteredArray[2].text) //print --Service--, the third element of filtered array.

请记住，javascript的索引数组为零，因此第一个元素的索引为0，因此，为了访问第三个元素，您需要索引2.

答案 5 :(得分：0)

您可能想尝试使用optgroups吗？

这样的事情：

<select name="List" id="List">

    <option value="">-Select-</option>

    <optgroup label="--Product--">
        <option value="">product1</option>
        <option value="">product2</option>
        <option value="">product3</option>
    </optgroup>

    <optgroup label="--Software--">
        <option value="">software1</option>
        <option value="">software2</option>
        <option value="">software3</option>
    </optgroup>

    <optgroup label="--Services--">
        <option value="">service1</option>
        <option value="">service2</option>
        <option value="">service3</option>
    </optgroup>

</select>

然后，

var select = document.getElementById('List');
var optgroups = select.getElementsByTagName('optgroup');

console.log(optgroups[2].label);

将显示：

--Services--

答案 6 :(得分：0)

尝试：

＆＃13;
＆＃13; 
function load() { 
    list = document.getElementById('List');
    var data = document.getElementsByTagName('option');
    currentCatagory=null;//the current selected catagory
    currentvalue=null;
    listdata=[];
    
    //for all the options 
    for(cnt = 0; cnt < data.length; cnt++){
        var e = data[cnt].innerHTML;//get option text
        if(e.startsWith('-')){//test to make a catagory out of it
            if(currentCatagory!=null)//do not concat is listdata is null
                listdata=listdata.concat(currentCatagory);
            currentCatagory = {"this":e,"listOfItems":[]};//create the catagory
        }else if(currentCatagory!=null){//make sure currentCatagory is not null
            var l=currentCatagory.listOfItems;//get the Catagory's list
            currentCatagory.listOfItems = l.concat(e);//and add e
        }
    }
    listdata=listdata.concat(currentCatagory);//add  last catagory
    //sets the list to show only catagories
    var inner='';
    for (i = 0; i < listdata.length; i++) {
        inner+=parseOp(listdata[i].this);
    }
    list.innerHTML=inner;
}
    function update(){
    //check to make sure everything is loaded
        if(typeof list=='undefined'){
            load();
        }
        
        var inner='';//the new  options
        var value=list.options[list.selectedIndex].innerHTML;
        if(value==currentvalue) return;
        if(value.startsWith('-')){//if catagory
            if(value.startsWith('--')){//if not -Select-
                for (i = 0; i < listdata.length; i++) {//for all catagories 
                    if(value==listdata[i].this){//if it is the current selected catagory then...
                        currentCatagory=listdata[i];//update the currentCatagory object
                        inner+=parseOp(listdata[i].this);//parse as option and append
                        //then append catagory's items
                        for(item in listdata[i].listOfItems){
                            inner+=parseOp(listdata[i].listOfItems[item]);
                        }
                    }else{//appends the other catagories
                        inner+=parseOp(listdata[i].this);
                    }
                }
            }else{//if it is '-select-' then just append the catagories
                for (i = 0; i < listdata.length; i++) {
                    inner+=parseOp(listdata[i].this);
                }
            }
            //set the new options
            list.innerHTML=inner;
        }
    }
    function parseOp(str){
    //parse the options
     return '<option value="">'+str+'</option>';
    }
＆＃13; 
<select name="List" id="List" onchange="update();">
    <option value="">-Select-</option>
    <option value="">--Product--</option>
    <option value="">product1</option>
    <option value="">product2</option>
    <option value="">product3</option>
    <option value="">--Software--</option>
    <option value="">software1</option>
    <option value="">software2</option>
    <option value="">software3</option>
    <option value="">--Services--</option>
    <option value="">service1</option>
    <option value="">service2</option>
    <option value="">service3</option>
</select>
＆＃13;
＆＃13;
＆＃13;

要设置下拉框，您必须运行load()否则只会在第一次更改事件发生后调用load()。

相关问题
最新问题