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

时间:2013-09-26 09:55:44

标签: jquery ajax grails-2.0

我有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)
});
}

编辑:enter image description here

1 个答案:

答案 0 :(得分:0)

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

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

您没有其他选择,但有两个具有相同ID和不同类型的元素,您可以通过在选择器中添加type tag进行选择

<强> Live Demo

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