Javascript - Цикл выбора параметров, щелкающий по каждому из них

#javascript

Вопрос:

Я пытаюсь просмотреть список выбора с более чем 200 записями и щелкнуть по каждой из них. При нажатии на элемент выполняется функция selectCountry(), которая добавляет строку в таблицу. Я хочу, чтобы он создавал таблицу с каждым выбранным параметром. Интересующая страница находится по адресу: http://www.world-statistics.org/result.php?code=ST.INT.ARVL?name=International tourism, number of arrivals .

Пока у меня есть следующее, но, похоже, это не работает:

 var sel = document.getElementById('selcountry');
var opts = sel.options;    
for(var opt, j = 0; opt = opts[j]; j  ) {selectCountry(opt.value)}

Я пытаюсь сделать это в консоли в Chrome.

1. Я действительно надеюсь, что это для тестового кода или чего-то подобного, и вы не создаете продукт / инструмент на этом…

2. Пожалуйста, поясните, что именно не работает. jsfiddle также был бы полезен.

Ответ №1:

Одна из самых полезных функций dev tools заключается в том, что когда вы пишете имя функции, вы получаете обратно ее исходный код. Вот исходный код для selectCountry функции:

 function selectCountry(select) { 
        if (select.value == "000") return;
        var option = select.options[select.selectedIndex]; 
        var ul = select.parentNode.getElementsByTagName('ul')[0]; 
        var choices = ul.getElementsByTagName('input'); 
        for (var i = 0; i < choices.length; i  ) 
            if (choices[i].value == option.value) {
                $("#selcountry:selected").removeAttr("selected");
                $('#selcountry').val('[]');
                return;
            } 
        var li = document.createElement('li'); 
        var input = document.createElement('input'); 
        var text = document.createTextNode(option.firstChild.data); 
        input.type = 'hidden'; 
        input.name = 'countries[]'; 
        input.value = option.value;
        li.appendChild(input); 
        li.appendChild(text); 
        li.onclick = delCountry;
        ul.appendChild(li);
        addCountry(option.firstChild.data, option.value);   
        $("#selcountry:selected").removeAttr("selected");
        $('#selcountry').val('');
    }

Теперь ваш недостаток очевиден. selectCountry принимает весь элемент select в качестве аргумента в отличие от значения select (что является ужасным дизайном, но meh). Вместо передачи значения элемента измените его индекс:

 var sel = document.getElementById('selcountry');
var opts = sel.options;    
for(var i = 0; i < opts.length; i  ) {
    sel.selectedIndex = i
    selectCountry(sel)
}