Нужна помощь, объединяющая функции jquery

Question

Я пытаюсь взломать пару различных функций jquery, чтобы помочь мне завершить проект, над которым я работаю.

Первая часть, кажется, работает (заполнение двух входных текстовых полей, но я не могу заполнить второй вариант drop down с массивом, который я предоставил. Я уверен, что это что-то простое, но новое для jquery I can not вполне понять это.

Редактировать

мне нужно разделить значение опций (разделенное «_») первого Выбери выпадающий список и отправить те и текстовые полей, отображаемых. Это имеет важное значение для функциональности моей страницы.

Вот мой h TML

<form action="/revenue_lines/lock" id="lockLockForm" method="post" accept-charset="utf-8"> 
<input type="text" id="RevenueLineDate1"> 
<input type="text" id="RevenueLineDate2"> 
<select id="selector"> 
    <option value="Data1_<Data1>">Sample1</option> 
    <option value="Data2_<Data2>">Sample2</option> 
</select> 
<select id="item"></select> 

А вот мой JQuery

$('#selector').on('change', function() { 
var val = this.value; 
var parts = val.split("_"); 
$('#RevenueLineDate1').val(parts[0]); 
$('#RevenueLineDate2').val(parts[1]); 
}); 

Sample1 = new Array('Top Story', 'Cases', 'News'); 
Sample2 = new Array('Top Story', 'Cases', 'News'); 

populateSelect(); 

$(function() { 

$('#selector').change(function() { 
    populateSelect(); 
}); 

}); 

function populateSelect() { 
selector = $('#selector').val(); 
$('#item').html(''); 

eval(selector).forEach(function (t) { 
    $('#item').append('<option>' + t + '</option>'); 
}); 
} 

Вот ссылка на jsfiddle я отработка.

Большое спасибо заранее!

Answer 1

Вы были почти там!

Попробуйте этот HTML вместо:

<select id="selector"> 
    <option value="Sample1">Sample1</option> 
    <option value="Sample2">Sample2</option> 
</select> 

Ваш .val() получает значение атрибута выбранного <option>, а не текст.

Edit:

Я вижу из вашего редактирования, что исходные значения важны для вас. В этом случае замените .val() на populateSelect на .text(), и вы получите поведение, которое, я думаю, вы хотите.

function populateSelect() { 
    selector = $('#selector').text(); 
    $('#item').html(''); 

    eval(selector).forEach(function (t) { 
     $('#item').append('<option>' + t + '</option>'); 
    }); 
} 

Как примечание, я обычно не рекомендуется использовать видимый текст этак хорошая практика - это мешает вам делать такие вещи, как локализовать текст. Одним из альтернатив было бы вместо этого отключить первую часть значения (Data1, Data2) с использованием split() и использовать их в качестве имен массивов. Затем вы можете изменять отображаемый текст, не нарушая свою функциональность.