通过jQuery向SELECT发送不同的值

时间：2015-05-18 14:52:44

标签： javascript jquery

我有一个带有汽车和模型的选择框..当我选择一辆汽车和型号时，我得到那辆车的价格.. 然后我有一个按钮在同一个表格和页面上添加一辆新车。所有这一切都通过从汽车发送id的jquery生成选择返回所有模型的查询。

问题是，当我尝试选择第二辆车时，我无法选择新的品牌，因为它使用了来自第一个选择选项的相同ID。因此，对于我的第二辆车，我从汽车制造车型，我选择了我的第一辆车...... 

my js:
$(document).ready(function(){
$("select#marca").change(function(){
var id = $("select#marca option:selected").attr('value');
$.post("select_type.php", {id:id}, function(data){
    $("select#modello").removeAttr("disabled");
    $("select#modello").html(data);
    });

$('select#modello').change(function () {
var gruppo = $(this).attr('rel');
var id_tipo = $(this).val();
var id_referente = <?php echo $data['idAffiliato'];?>//$('#id_referente').val();
if(id_referente != '') {
    $.ajax({
        url: '../handlers/handler_geo.php',
        type: 'GET',
        data: { 'action': 'getservizi', 'referente': id_referente, 'id_tipo': id_tipo, 'rnd': Math.random() },
        dataType: 'json',
        cache: false,
        success:function(data) {
                    // alert(JSON.stringify(data));
                    $('#elenco_servizi_'+gruppo).children().remove();
                    for(var c=0; c < data.length; c++) {
                    $('#elenco_servizi_'+gruppo).append('<li><input type="radio" rel="'+gruppo+'" class="validate[required] '+gruppo+'" name="servizi_'+gruppo+'[]" value="'+data[c].prezzo+'" title="'+data[c].id+'" /><span class="tipo-servizio">'+data[c].nome+'</span><span class="importo-servizio">&euro; '+data[c].prezzo+'</span></li>');
                    }
        },
        error:function(){
            alert('error');
        }
    });
    } 
else {
        alert('attenzione, nessun referente disponbile per il servizio richiesto');
        }
});   
});

和我的表格

<h5>Marca auto</h5>
<select id="marca">
<option label=" "></option>
<?php Auto::ShowMarca(); ?>
</select>
<br><br>
<h5>Modello auto</h5>
<select id="modello" rel="cb_1" name="tipologie_auto[]" class="validate[required]">
</select>
<br><br>
<?php $autos = Auto::ShowModello(); ?>
<div class="clearfix"></div>
</div>

<div class="servizio" id="gruppo_cb_1">
<h5>servizio</h5>
<ul id="elenco_servizi_cb_1" class="elenco_servizi">
<li><span class="tipo-servizio">seleziona la tipologia di veicolo per vedere i servizi</span></li>
</ul>
<input type="hidden" id="servizi_cb_1" name="servizi_cb_1" />
<span class="totale">&euro; <label id="lbl_cb_1">0</label></span>
</div>
</div>



<!-- ******************** auto 2 ******************** -->
<div id="auto_2" style="display:none;">
<h4>auto 2</h4>
<div class="right-col-prentivatore-form">
<div class="tipologia-auto">
<h5>Marca auto</h5>
<select id="marca">
<option label=" "></option>
<?php Auto::ShowMarca(); ?>
</select>
<br><br>
<h5>Modello auto</h5>
<select id="modello" rel="cb_2" name="tipologie_auto[]" class="validate[required]">
</select>
<br><br>
<?php $autos = Auto::ShowModello(); ?>

<div class="clearfix"></div>
</div>
<div class="servizio">
<h5>servizio</h5>
<ul id="elenco_servizi_cb_2" class="elenco_servizi">
<li><span class="tipo-servizio">seleziona la tipologia di veicolo per vedere i servizi</span></li>
</ul>
<input type="hidden" id="servizi_cb_2" name="servizi_cb_2" />
<span class="totale">&euro; <label id="lbl_cb_2">0</label></span>
</div>
</div>
</div>

2 个答案:

答案 0 :(得分：1)

为第二次自动选择使用不同的ID。例如：

<select id="marca2">

然后重新使用JavaScript for auto 1并将marca替换为marca2。例如，以下是重新使用更改功能的方法：

// Declare re-usable function that takes an id (eg. 'marca' or 'marca2')
var changeHandler = function(selectId) {
    var id = $('select#' + selectId + ' option:selected').attr('value');
    $.post('select_type.php', {id:id}, function(data) {
        $('select#modello').removeAttr('disabled');
        $('select#modello').html(data);
    });
};

// Change for marca
$("select#marca").change({ selectId: 'marca'},  function(event) {
    changeHandler(event.data.selectId);
});

// Change for marca2
$("select#marca2").change({ selectId: 'marca2'},  function(event) {
    changeHandler(event.data.selectId);
});

答案 1 :(得分：1)

您有两个<select>元素与id="modello"，id="marca"相同，因此您的行$("select#marca")和$('select#modello')只会占用第一个元素。

您必须使用类引用这些元素。

试试这个：

您的表格：

<h5>Marca auto</h5>
<select class="marca">
<option label=" "></option>
<?php Auto::ShowMarca(); ?>
</select>
<br><br>
<h5>Modello auto</h5>
<select class="modello" rel="cb_1" name="tipologie_auto[]" class="validate[required]">
</select>
<br><br>
<?php $autos = Auto::ShowModello(); ?>
<div class="clearfix"></div>
</div>

<div class="servizio" id="gruppo_cb_1">
<h5>servizio</h5>
<ul id="elenco_servizi_cb_1" class="elenco_servizi">
<li><span class="tipo-servizio">seleziona la tipologia di veicolo per vedere i servizi</span></li>
</ul>
<input type="hidden" id="servizi_cb_1" name="servizi_cb_1" />
<span class="totale">&euro; <label id="lbl_cb_1">0</label></span>
</div>
</div>



<!-- ******************** auto 2 ******************** -->
<div id="auto_2" style="display:none;">
<h4>auto 2</h4>
<div class="right-col-prentivatore-form">
<div class="tipologia-auto">
<h5>Marca auto</h5>
<select class="marca">
<option label=" "></option>
<?php Auto::ShowMarca(); ?>
</select>
<br><br>
<h5>Modello auto</h5>
<select class="modello" rel="cb_2" name="tipologie_auto[]" class="validate[required]">
</select>
<br><br>
<?php $autos = Auto::ShowModello(); ?>

<div class="clearfix"></div>
</div>
<div class="servizio">
<h5>servizio</h5>
<ul id="elenco_servizi_cb_2" class="elenco_servizi">
<li><span class="tipo-servizio">seleziona la tipologia di veicolo per vedere i servizi</span></li>
</ul>
<input type="hidden" id="servizi_cb_2" name="servizi_cb_2" />
<span class="totale">&euro; <label id="lbl_cb_2">0</label></span>
</div>
</div>
</div>

你的JS：

$(document).ready(function(){
    $("select.marca").change(function(){
        var id = $(this).find("option:selected").attr('value');
        $.post("select_type.php", {id:id}, function(data){
            $(this).parent().find('select.modello').removeAttr("disabled");
            $(this).parent().find('select.modello').html(data);
        });
    });

    $('select.modello').change(function () {
        var gruppo = $(this).attr('rel');
        var id_tipo = $(this).val();
        var id_referente = <?php echo $data['idAffiliato'];?>//$('#id_referente').val();
        if(id_referente != '') {
            $.ajax({
                url: '../handlers/handler_geo.php',
                type: 'GET',
                data: { 'action': 'getservizi', 'referente': id_referente, 'id_tipo': id_tipo, 'rnd': Math.random() },
                dataType: 'json',
                cache: false,
                success:function(data) {
                    // alert(JSON.stringify(data));
                    $('#elenco_servizi_'+gruppo).children().remove();
                    for(var c=0; c < data.length; c++) {
                        $('#elenco_servizi_'+gruppo).append('<li><input type="radio" rel="'+gruppo+'" class="validate[required] '+gruppo+'" name="servizi_'+gruppo+'[]" value="'+data[c].prezzo+'" title="'+data[c].id+'" /><span class="tipo-servizio">'+data[c].nome+'</span><span class="importo-servizio">&euro; '+data[c].prezzo+'</span></li>');
                    }
                },
                error:function(){
                    alert('error');
                }
            });
        } else {
            alert('attenzione, nessun referente disponbile per il servizio richiesto');
        }
    });
});

我没有测试，可能还有其他错误，我没有注意到。

相关问题
最新问题