按另一个列表框的值过滤javascript中列表框的值
[英]Filtering values of a listbox in javascript by value of another listbox
问题描述
I am trying to retain the value (URL) of selectbox1 when filtering what is shown in selectbox1 by selecting a value in selectbox0 .
我想保留selectbox1的值（URL）过滤时什么是selectbox1通过选择selectbox0值显示。 It is being filtered against selectbox2 .它正在针对selectbox2进行过滤。
The issue I am having is that it is not the URL (value) is not retained, only the inner text is kept in selectbox1 after I filter it.我遇到的问题是它不是不保留 URL（值），只有内部文本在我过滤后保留在selectbox1 中。
Another thing that I would like to solve is that I would like to make selectbox2 hidden from the user, if possible.我想解决的另一件事是，如果可能的话，我想让selectbox2对用户隐藏。
<html>
<head>
<title>Links</title>
<select id="selectbox0" name="" ;>
<option value="" selected>All</option>
<option value="Google">Google</option>
<option value="Microsoft">Microsoft</option>
<option value="Apple">Apple</option>
</select>
<select id="selectbox1" name="" ;>
<option value="https://www.google.com" selected>Google</option>
<option value="https://www.microsoft.com">Microsoft</option>
<option value="https://www.apple.com">Apple</option>
</select>
<select id="selectbox2" name="" ;>
<option value="https://www.google.com" selected>Google</option>
<option value="https://www.microsoft.com">Microsoft</option>
<option value="https://www.apple.com">Apple</option>
</select>
<button onclick="openInTabSelect();">Open</button>
<script type="text/javascript">
function openInTabSelect() {
var pSelect = document.getElementById('selectbox1').value;
//console.log(pSelect)
var newTab = safari.self.browserWindow.openTab();
newTab.url = pSelect;
}
var selectbox0 = document.getElementById('selectbox0'),
selectbox1 = document.getElementById('selectbox1'),
selectbox2 = document.getElementById('selectbox2');
selectbox0.addEventListener('change', function() {
selectbox1.innerHTML = '';
for (var childIndex = 0; childIndex < selectbox2.children.length; childIndex++) {
var child = selectbox2.children[childIndex];
if (child.innerHTML.search(selectbox0.value) != -1) {
option = document.createElement('option');
option.innerHTML = child.innerHTML;
selectbox1.appendChild(option);
}
}
});
</script>
</head>
</html>
Expected: Selecting Google in selectbox0 should filter out and only show Google in selectbox1 and retain its value www.google.com which will be used to open in a new tab by clicking on button Open .预期：在selectbox0 中选择Google应该过滤掉并且只在selectbox1 中显示Google并保留其值www.google.com将用于通过单击按钮打开在新选项卡中打开。
Exp.经验。 element: < option value="https://www.google.com" selected="">Google< /option >元素： < option value="https://www.google.com" selected="">Google< /option >
Actual: Selecting Google in selectbox0 does filter out and only show Google in selectbox1 but does not retain its value www.google.com .实际：在selectbox0中选择Google会过滤掉并且只在selectbox1 中显示Google但不保留其值www.google.com 。
Act.行为。 element: < option >Google< /option >元素： < option >Google< /option >
3 个解决方案
解决方案1
1 已采纳 2018-12-25 09:42:56
I believe I found your problem.我相信我发现了你的问题。 You are using innerHTML to get a value, but you want the value.您正在使用innerHTML来获取值，但您想要该值。 innerHTML gets the text in your option field, not the value. innerHTML获取选项字段中的文本，而不是值。 Try this:尝试这个：
if (child.search(selectbox1.value) != -1) {
option = document.createElement('option');
option.innerHTML = child.innerHTML;
selectbox1.appendChild(option);
}
解决方案2
0 2018-12-25 09:22:08
Your .getElementById() statement points to an id that does not exist selectbox :您的.getElementById()语句指向一个不存在的 id selectbox ：
var pSelect = document.getElementById('selectbox').value;
I'm not quite sure which id you were intending to point to, but try clearing this up first.我不太确定您打算指向哪个 ID，但请先尝试清除它。
解决方案3
0 2018-12-25 09:38:30
Thanks to all for reading this, but I managed to figure it out myself.感谢大家阅读本文，但我自己设法弄明白了。 I am sorry for asking the question a bit prematurely.我很抱歉问这个问题有点过早。 By adding a second line where I defined the value of option first it worked.通过添加第二行，我首先定义了选项的值，它起作用了。
option.value = child.value;
option.innerHTML = child.innerHTML;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.