在 Grails 中通过 jQuery 选择正确的 html 标签

Question

我有 2 个选择框，一个带有汽车名称，第二个带有车型，当我选择汽车名称（例如 BMW）时，第二个选择框必须更新为属于 BMW 的车型。我用 jQuery 创建了这个日志。但问题是，我的网页设计师使用 css3 创建了非常酷的选择框设计，为此他需要隐藏输入并选择具有相同 ID 属性的标签（例如 id="car_model"）。当我调用 jQuery 函数时，它会更新隐藏的输入并用选项填充它。如何选择使用 id="car_model" 选择而不是使用相同 id="car_model" 的隐藏类型。

控制者：

class HomeController {

def index() {
    def cars = Car.list();
    render (view: '/index', model:[cars:cars])
}

def getModels(params) {
    def models = Models.findAll {
        car.id == params.id
    }
    println(models)
    withFormat {
        html {
            render(template:'/select',model:[model:models])
        }
        json {
            render models as JSON
        }
    }
}

}

查看：

<div class="row field_select">
                <label class="label_title">Select Maker:</label>                    
                <g:select class="select_styled" name="car_maker" from="${cars}"
                    optionKey="id"
                    optionValue="name"
                    noSelection="['':'- Choose a car -']"
                    onchange="${remoteFunction(
                        action:'getModels.json',
                        onSuccess:'getCarModels(data)',
                        params:'\'id=\' + this.value' )}"/>

            </div>
            <div class="row field_select" >
                <label class="label_title">Select Model:</label>
                <select class="select_styled" name="car_model"></select>
            </div>

jQuery：

function getCarModels(data) {   
var $element = $('#car_model');
$element.empty();
$.each(data, function(id, modelName) {
  var option = $('<option/>').val(id).text(modelName);
  $element.append(option)
});
}

编辑：

Answer 1

html 元素的 id 应该是唯一的，您可以分配一个类来选择使用 class selector 选择它。隐藏字段不会得到select的类，你可以区分它。

var $element = $('.selectclass');

您没有其他选择，只有两个具有相同 id 和不同类型的元素，然后您可以通过在选择器中添加 type 或 tag 来选择

Live Demo

var $element = $('select[name=car_model]');