更改輸入文本以選擇選項與jquery

Question

我有一個表中的一行選擇選項。 這是HTML表格

<td> 
<select id="itemClean" class="form-control" name="item"> 
    <option value="01">Certificate</option> 
    <option value="02">Interior</option> 
    <option value="03">Exterior</option> 
    <option value="04">Foreign Marking</option> 
</select> 
</td> 

<td> 
    <input id="remarks" class="form-control" type="text" name="remarks" placeholder="Describe it.."> 
</td> 

我的情況下，是，如果選擇的選擇的選擇是室內，我想改變這種狀況有一個文本輸入#remarks選擇選項下一列。我怎麼能讓它成真。 ？

這是我的jQuery代碼

/*Handling cleaning interior */ 
    $(document).on("change", "#itemClean", function() { 
     var selected = $('#itemClean option:selected').text(); 
     var tr = $(this).closest("tr"); 
     var remarks = tr.find("#remarks").val(); 

     if (selected === "Interior") { 
      var selRemarksCleaning = '<select class="form-control" name="remarksCleanig" id="remarksCleanig">'; 
      $.each(<?php echo json_encode($interior_cleaning_item); ?>, function (i, elem) { 
       selRemarksCleaning += '<option value = ' + elem.NAMA_CLEAN_ITEM + '>' + elem.NAMA_CLEAN_ITEM + '</option>'; 
      }); 
      selRemarksCleaning += '</select>'; 

      //CHANGE THE INPUT TO THIS SELECT OPTION 
     } else { 

     } 
    }); 

任何幫助它如此讚賞。

已更新感謝您對 先生的快速響應這是基本代碼。

function addRowClean() { 
    var selItem = '<select class="form-control" name ="item" id="itemClean">'; 

    $.each(<?php echo json_encode($cleaning_item); ?>, function (i, elem) { 
     selItem += '<option value=' + elem.ITEM_ID + '>' + elem.NAMA_ITEM + '</option>'; 
    }); 

    selItem += '</select>'; 

    $("#tableClean").find('tbody').append('<tr><td>' + 
      '<span class="label label-success btn-block" id="type">CLEANING</span></td><td>' + selItem + 

     //BASED YOUR SUGGESTION 
      '</td><td><input class="form-control remarks" type="text" name="remarks" placeholder="Describe it.." /><select class="form-control remarksCleanig" name="remarksCleanig"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>' + 

      '</td><td><button id="btnclean" class="btn btn-block btn-primary" type="button" data-toggle="toggle"><i class="fa fa-plus"></i></button>' + 

      '</td><td><button class="btn btn-block btn-danger" type="button"><i class="fa fa-trash-o"></button>' + 
      '</td></tr>'); 
    $(".time").inputmask("hh:mm"); 
} 

結果是，輸入和選擇選項都顯示。再次感謝

Answer 1

首先，給定你的JS代碼，它會顯示你有多個元素具有相同的id屬性，這是無效的。使用類來分組多個通用元素。

其次，它就會簡單得多中都有你的HTML的select和input，只是hide()/show()有關的一個，基於從父select選擇的選項。試試這個：

<td> 
    <select class="form-control itemClean" name="item"> 
     <option value="01">Certificate</option> 
     <option value="02">Interior</option> 
     <option value="03">Exterior</option> 
     <option value="04">Foreign Marking</option> 
    </select> 
</td> 

<td> 
    <input class="form-control remarks" type="text" name="remarks" placeholder="Describe it.." /> 
    <select class="form-control remarksCleanig" name="remarksCleanig"> 
     <!-- populate this from your $interior_cleaning_item PHP variable... --> 
    </select> 
</td> 

.remarks { 
    display: block; 
} 
.remarksCleanig { 
    display: none; 
} 

$(document).on("change", ".itemClean", function() { 
    var selected = $(this).find'option:selected').text(); 
    var $tr = $(this).closest("tr"); 
    var remarks = $tr.find(".remarks").val(); 
    $tr.find('.remarks').toggle(selected != 'Interior'); 
    $tr.find('.remarksCleanig ').toggle(selected == 'Interior'); 
}); 

Example fiddle

Answer 2

嘗試：

$(document).on("change", 'select[name="item"]', function() { 
      var selected = $(this).find('option:selected').text(); 
      var tr = $(this).closest("tr"); 
      var remarks = tr.find("#remarks").val(); 

      if (selected === "Interior") { 
       var selRemarksCleaning = '<select class="form-control" name="remarksCleanig" id="remarksCleanig">'; 
       $.each(<?php echo json_encode($interior_cleaning_item); ?>, function (i, elem) { 
        selRemarksCleaning += '<option value = ' + elem.NAMA_CLEAN_ITEM + '>' + elem.NAMA_CLEAN_ITEM + '</option>'; 
       }); 
       selRemarksCleaning += '</select>'; 

       tr.append($(selRemarksCleaning));//add the select option 
       tr.find("#remarks").hide();//hide the input field 
      } else { 
tr.find("#remarks").show(); 
       $('select[name="remarksCleanig"]').remove(); 
      } 
     }); 

的jsfiddle：https://jsfiddle.net/4oxbx7oz/1/