按另一個列表框的值過濾javascript中列表框的值

Question

我想保留selectbox1的值（URL）過濾時什么是selectbox1通過選擇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應該過濾掉並且只在selectbox1 中顯示Google並保留其值www.google.com將用於通過單擊按鈕打開在新選項卡中打開。

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

實際：在selectbox0中選擇Google會過濾掉並且只在selectbox1 中顯示Google但不保留其值www.google.com 。

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

Answer 1

我相信我發現了你的問題。 您正在使用innerHTML來獲取值，但您想要該值。 innerHTML獲取選項字段中的文本，而不是值。 嘗試這個：

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

Answer 2

您的.getElementById()語句指向一個不存在的 id selectbox ：

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

我不太確定您打算指向哪個 ID，但請先嘗試清除它。

Answer 3

感謝大家閱讀本文，但我自己設法弄明白了。 我很抱歉問這個問題有點過早。 通過添加第二行，我首先定義了選項的值，它起作用了。

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

按另一個列表框的值過濾javascript中列表框的值

問題描述

3 個解決方案

解決方案1
1 已采納 2018-12-25 09:42:56

解決方案2
0 2018-12-25 09:22:08

解決方案3
0 2018-12-25 09:38:30

按另一個列表框的值過濾javascript中列表框的值

問題描述

3 個解決方案

解決方案1 1 已采納 2018-12-25 09:42:56

解決方案2 0 2018-12-25 09:22:08

解決方案3 0 2018-12-25 09:38:30

解決方案1
1 已采納 2018-12-25 09:42:56

解決方案2
0 2018-12-25 09:22:08

解決方案3
0 2018-12-25 09:38:30