当用户点击选项'other'时,如何将输入字段创建为文本?

时间:2014-07-02 10:19:35

标签: jquery html select

<tr>
    <td colspan=2 style="font-weight: bold;text-align:left;">
            Chief Complaint: <span style="color: Red;">*</span>
        <select name="chief" style="width:160px">
                <option value="0" selected>--Select Complaint--</option>
                <option value="RTA">RTA</option>
                <option value="Blast">Blast</option>
                <option value="Shot">Shot</option>
                <option value="shrapnel">shrapnel</option>
                <option value=" " onclick="" >other</option>
            </select>
    </td>
</tr>

在这段代码中我该怎么办?当用户点击“其他”选项时,列表框旁边应该有一个文本字段。我怎样才能获得这个价值?

2 个答案:

答案 0 :(得分:0)

我建议使用jquery并从onclick中删除option

$("select").on("change",
               function(){
                   if($(this).find("option:selected").val() == "other"){
                       var input = $("<input/>",{
                                       type: "text"
                                   });
                       $("body").append(input);                           
                   }
               });

fiddle

另请查看here以获取文本框中的值。

答案 1 :(得分:0)

试用此代码:

$(document).ready(function(){
  $('#chief').change(function() {
      if($('#chief').val() == "others")  {
        $("#show_inp").show();
      }
      });
 });


<tr>
    <td colspan=2 style="font-weight: bold;text-align:left;">
            Chief Complaint: <span style="color: Red;">*</span>
        <input type="text" name="" id="show_inp">
        <select name="chief" id="chief" style="width:160px">
                <option value="0" selected>--Select Complaint--</option>
                <option value="RTA">RTA</option>
                <option value="Blast">Blast</option>
                <option value="Shot">Shot</option>
                <option value="shrapnel">shrapnel</option>
                <option value="others" id="other" onclick="" >other</option>
            </select>
    </td>
</tr>

这里是小提琴:http://jsfiddle.net/dJtQj/