按另一个列表框的值过滤 javascript 中一个列表框的值

Question

我试图通过选择过滤 selectbox1 中显示的内容时保留 selectbox1 的值 (URL) selectbox0 中的值。它正在根据 selectbox2.

进行过滤

我遇到的问题是 URL （值）没有被保留，只有内部文本在我过滤后保留在 selectbox1 中.

我想解决的另一件事是，如果可能的话，我想对用户隐藏 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>

预期：在 selectbox0 中选择 Google 应该过滤掉并且只显示 Google 在 selectbox1 并保留其值 www.google.com 将用于通过单击在新选项卡中打开按钮打开.

Exp。元素：< option value="https://www.google.com" selected="">Google< /option >

实际：在 selectbox0 中选择 Google 会过滤掉并且只显示 [=64= selectbox1 中的 ] 但不保留其值 www.google.com。

行动。元素：< option >Google< /option >

Answer 1

您的 .getElementById() 语句指向一个不存在的 id selectbox:

var pSelect = document.getElementById('selectbox').value;

我不太确定你打算指向哪个 ID，但请先尝试清除它。

Answer 2

感谢大家阅读本文，但我还是自己弄明白了。很抱歉过早地问了这个问题。通过添加第二行，我首先定义了选项的值，它起作用了。

            option.value = child.value;
            option.innerHTML = child.innerHTML;

Answer 3

我相信我发现了你的问题。您正在使用 innerHTML 获取值，但您想要该值。 innerHTML 获取选项字段中的文本，而不是值。试试这个：

if (child.search(selectbox1.value) != -1) {
   option = document.createElement('option');
   option.innerHTML = child.innerHTML;
   selectbox1.appendChild(option);
   }

按另一个列表框的值过滤 javascript 中一个列表框的值

Filtering values of a listbox in javascript by value of another listbox

javascript

listbox

drop-down-menu