javascript - 在 div 内动态替换选择框

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/

score 0 · Accepted Answer

简单更改：将您的更改事件处理程序绑定到容器 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/

如果您选择品牌，则提醒模型，然后是模型。

score 0 · Accepted Answer

尝试以下步骤，

在更改品牌列表时进行 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
       });
});

score -1 · Accepted Answer

尝试以下操作：

/*  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分配动作。这基本上保留了一个分配给与描述匹配的所有元素的方法。

也可以看看：

javascript - 在 div 内动态替换选择框

3 回答 3

Related

Reference