Question

我想替换div中的选择框

<div class="models">
    <select disabled="disable">
      <option>Model Name</option>
    </select>
</div>

我正在尝试定位div并加载像这样的选择框

jQuery('.models select').change(function() {
        var model = jQuery('.models option:selected').text();

我没有采取任何改变行动

http://jsfiddle.net/HNgKt/

Answer 1

简单更改：将您的更改事件处理程序绑定到容器div（执行时应该存在）并从中获取文本值：

jQuery('.models').on('change','select',function() {
    var model = jQuery(':selected',this).text();
    var modelValue = jQuery(':selected',this).val();
});

注意：你的小提琴和标记已经打乱了，当然需要首先启用它，例如：

jQuery('.models>select').prop('disabled',false);

编辑：使用你的小提琴，我捣乱，评论你的负荷 - 因为它在那里不起作用，并且没有现成的清洁绳，这有效：

jQuery('.brands').change(function () {
    alert('here');
    var brand = jQuery('.brands option:selected').text();
  //  brand = cleanString(brand);
    //jQuery('.models').load('/pf-models #' + brand);
    jQuery('.models>select').append('<option >She is a classic</option>').prop('disabled', false);
});

alert(jQuery('.models>select').prop('disabled'));

jQuery('.models').on('change', 'select', function () {
    var model = jQuery(":selected", this).text();
    alert(model);
    model = cleanString(model);
    jQuery('#show-models').load('/pf-urls #' + model);
});

更新小提琴：http://jsfiddle.net/HNgKt/6/

编辑更详细的例子，仍然基于第一部分的负载返回的有效标记假设，我已经替换了html替换，因为我们无法访问该部分：

jQuery('.brands').change(function () {
    var brand = jQuery('.brands option:selected').text();
    $('.models').html('<select class="models"><option >' + brand + ' She is a classic</option><option>clunker</option></select>');
});
jQuery('.models').on('change', 'select', function () {
    var model = jQuery(":selected", this).text();
    alert('model:' + model);
});

小提琴：http://jsfiddle.net/HNgKt/7/

如果选择品牌，则选择模型，然后选择模型。

Answer 2

尝试以下步骤

关于更改品牌列表进行ajax调用，并确保在结果中收到新的列表选项，或者您也可以在jquery中动态准备选项列表。
并且在呼叫成功时重新填充接收数据的新列表。

jQuery('.brands').change(function() {
    var brand = jQuery('.brands option:selected').text();
    brand = JSON.stringify(cleanString(brand));
        $.ajax({
            type: "GET",        //GET or POST or PUT or DELETE verb
            url: ajaxUrl,       // Location of the service
            data: brand ,       //Data sent to server
            contentType: "",        // content type sent to server
            dataType: "json",   //Expected data format from server
            processdata: true,  //True or False
            success: function (data) {//On Successful service call
            var $newList = $(".models select'").empty();
            $newList.append(data);
            },
            error: function(){} // When Service call fails
       });
});

Answer 3

尝试以下方法：

/*  using delegate version of .on   */
jQuery(document).on('change', '.brands', function() {
    var brand = jQuery('.brands option:selected').text();
    brand = cleanString(brand);
    jQuery('.models').load('/pf-models #' + brand);
});

jQuery(document).on('change', '.models select', function() { 
    var model = jQuery('.models option:selected').text();
    model = cleanString(model);  
    jQuery('#show-models').load('/pf-urls #' + model);
});

要处理“动态”元素，您需要使用delegate来分配操作。这基本上保留了一个方法，分配给符合描述的所有元素。

另见：

在div内动态替换选择框

3 个答案: