Как получить данные из нескольких раскрывающихся списков выбора для отправки вызова jquery ajax?

Question

У меня есть форма с 2 полями выбора, которые мы будем называть полем ввода 1 и полем ввода 2. Я использую событие onChange, когда в поле ввода 1 делается выборка, чтобы вызвать скрипт, который должен получить некоторые данные из поля ввода. 1 и поле ввода 2 для отправки через Ajax сценарию, который вернет третий блок выбора в указанном элементе div с отфильтрованными значениями из базы данных. У меня почти все получилось, но у меня возникают проблемы с получением нужных мне данных на странице Выбор полей. Изображение области формы для наглядного пособия изображено ниже:

Вот код, который у меня есть для части формы HTML:

<div id="Input_Div_1">
<select name="Input_Box_1" id="Input_Box_1" onchange="sendthedatatotheajax(this);">
<option value="1" data-image="image1.jpg" data-extra1="a">Apple</option>
<option value="2" data-image="image2.jpg" data-extra1="b">Banana</option>
<option value="3" data-image="image3.jpg" data-extra1="c">Orange</option>
<option value="4" data-image="image4.jpg" data-extra1="d">Grapes</option>
</select>
</div>

<div id="Input_Div_2">
<select name="Input_Box_2" id="Input_Box_2">
<option value="1" data-image="image_cat.jpg" data-extra1="x">Red</option>
<option value="2" data-image="image_dog.jpg" data-extra1="y">Blue</option>
<option value="3" data-image="image_pig.jpg" data-extra1="z">Green</option>
<option value="4" data-image="image_wolf.jpg" data-extra1="qq">Cyan</option>
</select>
</div>

<div id="Output_Div_1">
<select name="Output_Box_1" id="Output_Box_1">
<option value="1" data-image="image_usa.jpg" data-extra1="washington">Waiting for Data 1</option>
<option value="2" data-image="image_russia.jpg" data-extra1="moscow">Waiting for Data 2</option>
</select>
</div>

Это мой Javascript, который нуждается в некоторой помощи для отправки данных в php-скрипт, который вернет третье окно выбора.

<script>
function sendthedatatotheajax(sel) {
    var the_Input_Box_1_value = sel.options[sel.selectedIndex].value;

// This is where I Need Help Start
    var the_Input_Box_1_dataextra1 = [how.do.i.get.this.value?].value;
    var the_Input_Box_2_value = [again.how.do.i.get.this.value?].value;
// This is where I Need Help Stop

    $("#Output_Div_1").html( "" );
    if (the_Input_Box_1_value.length > 0 ) { 

     $.ajax({
            type: "POST",
            url: "sendbackthedata.php",
            data: {"inputbox1value": the_Input_Box_1_value, "inputbox1dataextra1": the_Input_Box_1_dataextra1, "inputbox2value": the_Input_Box_2_value},
            cache: false,
            beforeSend: function () { 
                $('#Output_Div_1').html('<img src="loader.gif" alt="" width="24" height="24">');
            },
            success: function(html) {    
                $("#Output_Div_1").html( html );
            }
        });
    } 
}
</script>

У меня вопрос, какой код я использую, чтобы получить следующее

1) «Значение» Input-Box-1 2) «data-extra1» из Input-Box-1 3) «Значение Input-Box-2.

Любая помощь с этим будет высоко ценится ... Спасибо, ребята!

Answer 1

Если вы используете jQuery, вы можете сделать следующее:

$("#Input_Box_2 option:selected").val()

Таким образом, вы получите значение выбранной опции, если вы хотите найти какой-либо атрибут, вам нужно искать его с помощью attr(), поэтому оно будет выглядеть так:

$("#Input_Box_2 option:selected").attr("data-extra1") 

Answer 2

Ответы на ваши вопросы,

1. «Значение» Input-Box-1: sel.value;
2. «data-extra1» в Input-Box-1: $ ('# Input_Box_2'). Find (': selected'). Attr ('data-extra1');
3. Значение "Input-Box-2: $ ('# Output_Box_1'). Value ();

Они будут работать с надеждой