javascript - 通过 jQuery 向 SELECT 发送不同的值

Question

我有一个包含汽车和模型的选择框。当我选择汽车和模型时，我会得到该汽车的价格。然后我有一个按钮可以在相同的表单和页面上添加新车。所有这些都是通过 jquery 发送的，从汽车发送 id 以选择返回所有模型的查询。

问题是，当我尝试选择第二辆车时，我无法选择新品牌，因为它使用与第一个品牌选择选项相同的 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>

Answer 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');
        }
    });
});

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