Фильтрация значений списка в javascript по значению другого списка - PullRequest
0 голосов
/ 25 декабря 2018

Я пытаюсь сохранить значение (URL) selectbox1 при фильтрации того, что показано в selectbox1 , выбрав значение в selectbox0 .Он фильтруется по selectbox2 .

Проблема, с которой я столкнулся, заключается в том, что не сохраняется URL-адрес (значение), в selectbox1 * сохраняется только внутренний текст1012 * после того, как я его отфильтрую.

Еще одна вещь, которую я хотел бы решить, это то, что я хотел бы сделать 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>

Ожидаемый: выбор Google в selectbox0 должен отфильтровать и отобразить только 1010 * Google в selectbox1 и сохранить его значение www.google.com , который будет использоваться для открытия новой вкладки, нажав кнопку Открыть .

Эксп.элемент: < option value="https://www.google.com" selected="">Google< /option >

Фактически: при выборе Google в selectbox0 отфильтровывается и отображается только Google в selectbox1 но не сохраняет свое значение www.google.com .

Акт.элемент: < option >Google< /option >

Ответы [ 3 ]

0 голосов
/ 25 декабря 2018

Спасибо всем за то, что прочитали это, но мне удалось понять это самому.Я прошу прощения за то, что задал вопрос немного преждевременно.Добавив вторую строку, где я определил значение параметра сначала, он сработал.

0 голосов
/ 25 декабря 2018

Мне кажется, я нашел твою проблему.Вы используете innerHTML, чтобы получить значение, но вам нужно это значение.innerHTML получает текст в поле вашего параметра, а не значение.Попробуйте это:

if (child.search(selectbox1.value) != -1) {
   option = document.createElement('option');
   option.innerHTML = child.innerHTML;
   selectbox1.appendChild(option);
   }
0 голосов
/ 25 декабря 2018

Ваш оператор .getElementById() указывает на несуществующий идентификатор.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...