如何获得选择输入的第二个选项值?

时间:2014-06-04 11:40:50

标签: jquery html html5 dom select

我的表单中有三个选择输入:

...
<tr>
            <td><b><?php echo _getText("service.OD.tbr_title.vondrona");?></b></td>
            <td>
            <select id="vondrona" name="vondrona" onchange="rafraichirListBoxs($(this).val());" >
              <option value="">Select all</option>
              <?php
              for ($r=0 ; $r<$data['vondrona']['cnt']; $r++) {
              ?>
              <option value="<?php echo $data['vondrona'][$r]['id_vondrona']; ?>"><?php echo $data['vondrona'][$r]['lib_vondrina']; ?></option>
              <?php } ?>
            </select>
            </td>
        </tr>
        <tr>
            <td><b><?php echo _getText("service.OD.tbr_title.sokajy");?></b></td>
            <td>
            <select id="sokajy" name="sokajy" onchange="rafraichirKarazana($(this).val());">
              <option value="">Select all</option>
              <?php
              for ($r=0 ; $r<$data['sokajy']['cnt']; $r++) {
              ?>
              <option value="<?php echo $data['sokajy'][$r]['id_sokajy']; ?>"><?php echo $data['sokajy'][$r]['lib_sokajy']; ?></option>
              <?php } ?>
            </select>
            </td>
        </tr>
        <tr>
            <td><b><?php echo _getText("service.OD.tbr_title.type");?></b></td>
            <td>
            <select id="karazana" name="karazana">
              <option value="">Select all</option>
              <?php
              for ($r=0 ; $r<$data['karazana']['cnt']; $r++) {
              ?>
              <option value="<?php echo $data['karazana'][$r]['id_karazana']; ?>"><?php echo $data['karazana'][$r]['lib_karazana']; ?></option>
              <?php } ?>
            </select>
            </td>
        </tr>
...

这些输入之间存在主 - 细节关系:vondrona是主要的主人,然后是sokajy和最后的karazana。

Javascripts:

function rafraichirListBoxs(id_vondrona) {
    var donne = "id_vondrona="+id_vondrona;
    var html = $.ajax({
            data: donne   ,
            type: "POST",
            url:  "<?php echo HTTP_AJAX ?>service/ListerSokajyAjax.php",
            async: false
         }).responseText;
    $('#sokajy').html(html);

    donne = "id_sokajy="+$('#sokajy').val(); // this causes the bug , how to get the second option value ( the option after the "Select all" first option ) ?
    html = $.ajax({
            data: donne   ,
            type: "POST",
            url:  "<?php echo HTTP_AJAX ?>service/ListerKarazanaAjax.php",
            async: false
         }).responseText;
    $('#karazana').html(html);

    donne = "type_id="+$('#karazana').val();
    html = $.ajax({
            data: donne   ,
            type: "POST",
            url:  "<?php echo HTTP_AJAX ?>service/ListerVokatraAjax.php",
            async: false
         }).responseText;
    $('#produit').html(html);
}

问题在于第一个选项“Select all”不是来自数据库。正如在javascript函数中提到的,我想获得与所选主选择输入相关的第一个详细选项值。

那么如何在“全选”选项之后获取选项值?

3 个答案:

答案 0 :(得分:2)

你应该试试

//As the index starts from 0, the second item index will be 1.
var secondOption = document.getElementById('ddl').options[1].value; 

或者你可以尝试

var secondOptionValue = $("#selbox option:eq(1)").val()

答案 1 :(得分:1)

例如,考虑你的第一次下拉, 您可以使用javascript获取第二个选项的值,如下所示:

var dd = document.getElementById('vondrona');
var value = dd.options[1].value;

或使用jQuery:

var value= $('#vondrona option:eq(1)').val();

答案 2 :(得分:1)

如果您总是希望拥有第二个选项,可以通过jQuery获取它:

donne = "id_sokajy="+$("#sokajy option:eq(1)").val();