Соединить и отфильтровать массивы в select

277

23 июля 2017, 10:44

Подскажите у меня есть 2 массива данных, которые соответствуют друг другу (название и адрес): 1.Title, 2.URL. В массиве Title есть пустые значения их хотел бы удалить и оставить только "актуальные", во втором массиве есть URL, тоже есть значения и часть этих значений соответствуют пустым в Title, мне бы хотелось в select собрать значения по Title=text, Value=URL, пишу кодом так, текст (Title) нормальный, но результат в значении (URL) [Object, Object]:

//В массиве arr1 (Title), такие значения: 
var arr1 = ['Name1','Name2','Name3','','','','','','']; 
//В массиве arr2 (URL), такие значения: 
var arr2 = ['URL1','URL2','URL3','URL4','URL5','URL6','URL7','URL8','URL9']; 
//Результат [Object, object] в значении 
$('#View').append($('<option>', {  
value: arr2, 
text : arr1 
})); 
//Результат в значении нормальный только Title 
$('#View1').append($('<option>', {  
value: arr1, 
text : arr1 
})); 
//Результат в значении нормальный только URL 
$('#View2').append($('<option>', {  
value: arr2, 
text : arr2 
}));

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<select id="View"></select> 
<select id="View1"></select> 
<select id="View2"></select>

Answer 1

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

Вот рабочий пример кода:

<!DOCTYPE html> 
<html> 
    <head> 
         
    </head> 
    <body> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
        <script> 
            $(document).ready(function(){ 
                 
                //В массиве arr1 (Title), такие значения: 
                var arr1 = ['Name1','Name2','Name3','','Name5','','','','']; 
                //В массиве arr2 (URL), такие значения: 
                var arr2 = ['URL1','URL2','URL3','URL4','','URL6','URL7','URL8','URL9']; 
                //Результат [Object, object] в значении 
                function logArrayElements(element, index, array) { 
                    if(arr2[index] != '' && element != ''){ 
                        $('#View').append($('<option>', {  
                            value: arr2[index], 
                            text : element 
                        })); 
                    } 
                } 
                arr1.forEach(logArrayElements); 
                 
                 
            }); 
        </script> 
        <select id="View"></select> 
    </body> 
</html>