我有2个选择框,一个有车名,第二个有车型,当我选择车名(e.x。宝马)时,第二个选择框必须更新,车型属于宝马。我用jQuery创建了这个logig。但问题是,我的网页设计师用css3创建了非常酷的选择框设计,为此,他需要隐藏输入和选择具有相同ID属性的标签(e.x.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)
});
}
编辑:
答案 0 :(得分:0)
html
元素的id应该是唯一的,您可以指定一个类来选择使用class selector
选择它。隐藏的字段不会得到选择类,你可以区分它。
var $element = $('.selectclass');
您没有其他选择,但有两个具有相同ID和不同类型的元素,您可以通过在选择器中添加type
tag
进行选择
<强> Live Demo 强>
var $element = $('select[name=car_model]');