如何将输入框替换为空下拉列表？

Question

首先，我有默认值是自定义输入，我从选择框中选择签证，然后输入框更改下拉值，这对我来说没问题。

但是当我重新选择自定义时，该框仍然显示为drowpdown。

我想在选择自定义

时显示输入

HTML代码

$('#row_container').on('click', '.product_type', function(){ 
    var product_type = $(this).val();

    if( product_type == 'custom') {

        var option_input = $("<input type='text'/>") ;

        $(this).closest('tr').find('.product_id').empty();
        $(this).closest('tr').find('.product_id').append(option_input);
    }

})

HTML代码

<tr>
    <td><?= form_dropdown('product_type', array(
                'custom' => 'Custom',
                'tour_package' => 'Tour',
                'visa' => 'Visa'
           ),'','class="product_type"'); ?>
    </td>

    <td class='product_name_id_td'><input type='text' class='product_name'/></td>
</tr>

Answer 1

我创建了一个样本小提琴，请检查Fiddle

<select id="sel">
<option value="visa">Visa</option>
<option value="custom">Custom</option>
</select>
<span><input type="text"/></span>
<script>
$("span").html("<select id='select'></select>");

$("#sel").change(function(e){
if($(this).val() == "custom")
 $("span").html("<input type='text'/>");
else
    $("span").html("<select id='select'></select>");
});
</script>

Answer 2

现在我修复了这样的代码。

$('#row_container').on('change', '.product_type', function(){ 

        if( $(this).val() == 'custom') {

           $(this).closest('tr').find('.product_name_id_td').html("<input type='text'/>");


        }
    })

谢谢你

Answer 3

试试这个

$('#row_container').on('change', '.product_type', function(){ 
    var product_type = $(this).val();
    if( product_type == 'custom') {
      $(this).closest('tr').find('.product_name_id_td').empty().append("<input type='text'/>");
    }

})

Answer 4

• 在上面的场景中 - 您将委派该事件。所以$(this).val()不会工作。
• 如果下拉（选择），请尝试change事件而不是click。

使用此功能。

<强> Demo Fiddle

$('#row_container').on('change', '.product_type', function(e){

    var product_type = $(this).val();

    if( product_type === 'custom') {

        var option_input = "<input type='text'/>" ;

        $(this).closest('tr').find('.product_name_id_td').empty().append(option_input);
    }

});