Question

我有一些要基于选定项目使用javascript进行过滤的选项选项标签，但不起作用，如果所选元素中包含'CONTINUE'或'BRACKET'，则根据空格将其拆分为一个数组，并仅采用第一和第二索引并以这种方式进行连接，然后将其添加一个带有额外字符串的数组。 / p>

然后在for循环中，基于'|'拆分数组并根据上述if条件将它们放在html标记中。但是部分没有在标签中显示结果，请提供任何帮助。请看一下我上传的代码。

谢谢。

function products(s5,s6){

var vr = /CONTINUE/;
var vr1 = /BRACKET/;
var proname = document.getElementById(s5);

var protype = document.getElementById(s6);

protype.innerHTML = "";

if(vr.test(proname)){
// if the selected element contains 'CONTINUE' in it, then split it based on a space 
// into an array and take only the 1st and 2nd index and concatinate it this way, then 
// add it an array with some extra string.

  var nw = proname.split(" ");
  var nw1 = nw[0]+' '+nw[1];
  var nw2 = nw1+" FULL PROFILE"+' | '+"FULL PROFILE";
  var optionAray = [" | Select product type"];
  optionAray.push(nw2);
  //alert([optionAray]);
} else if(vr1.test(proname)){
    // if the selected element contains 'BRACKET' in it, then split it based on a space 
    // into an array and take only the 1st and 2nd index and concatinate it this way, then 
    // add it an array with some extra string.

    var nw = proname.split(" ");
    var nw1 = nw[0]+' '+nw[1];
    var nw2 = nw1+" BRACKET PROFILE"+' | '+"BRACKET PROFILE";
    var optionAray = [" | Select product type"];
    optionAray.push(nw2);
  //alert([optionAray]);
} 
for(var option in optionAray){
    // here am splitting the array based on the '|' and put them in html <option> tag based on the
    // if condition above.
    // But portion is not displaying the result in the <option> tag, any help please.
  var pair = optionAray[option].split("|");
  var newOption = document.createElement("option");
  newOption.value = pair[0];
  newOption.innerHTML = pair[1];
  protype.options.add(newOption);
}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<br><br>
<center><label>Select to filter</label><br><br>
    <td>ProductName</td>
          <td>
            <select name="product_name" type="text" class="form-control" id="product_name" onchange="products(this.id,'prtype')">
              <option value="">Select product name</option>
              <option value="SMART LINE CONTINUE PROFILE">SMART LINE</option>
              <option value="SEA LINE BRACKET PROFILE">SEA LINE</option>
              <option value="SQUARE LINE BRACKET PROFILE">SQUARE LINE</option>
              <option value="SLIM LINE CONTINUE PROFILE">SLIM LINE</option>
              <option value="SMALL LINE CONTINUE PROFILE">SMALL LINE</option>
              <option value="STAR LINE BRACKET PROFILE">STAR LINE</option>
              <option value="SKY LINE BRACKET PROFILE">SKY LINE</option>
              <option value="SPARK LINE BRACKET PROFILE">SPARK LINE</option>
              <option value="SLEEK LINE CONTINUE PROFILE">SLEEK LINE</option>
              <option value="SUPER LINE CONTINUE PROFILE">SUPER LINE</option>
              <option value="SIGNATURE LINE CONTINUE PROFILE">SIGNATURE LINE</option>
            </select>
          </td>
          <td>
<select type="text" class="form-control" name="prtype" id="prtype">
              
            </select>
          </td></center>
</body>
</html>

Answer 1

更改

var proname = document.getElementById(s5)

到

var proname = document.getElementById(s5).value

这将为您提供元素的值，而不是元素本身。

所选选项无法显示在选项标签中

1 个答案: