下拉菜单html表单个性化分类答案

【问题标题】：dropdown menu html form personalized category下拉菜单html表单个性化分类
【发布时间】：2011-09-03 19:05:43
【问题描述】：

我有以下部分的下拉菜单代码

<p>
<label for='Select a Category '>Select a Category<font color="red"><strong>*</strong></font>: </label></p> 
<p><div id='contactform_category_errorloc' class='err'></div>

  <select name="category" class="input">
    <option value="0" selected="selected">
      [choose yours]
    </option>
    <option value="Arts and entertainment">Arts and entertainment</option>
    <option value="Automotive">Automotive</option>
    <option value="Business">Business</option>
    <option value="Computers">Computers</option>
    <option value="Games">Games</option>
    <option value="Health">Health</option>
    <option value="Internet">Internet</option>
    <option value="News and Media">News and Media</option>
    <option value="Recreation">Recreation</option>
    <option value="Reference">Reference</option>
    <option value="Shopping">Shopping</option>
    <option value="Sports">Sports</option>
    <option value="World">World</option>
  </select>
</p>

我想在下拉菜单中添加一个带有值的选项：“自定义”，当我选择此选项时，它会出现在空白字段下方作为输入文本，我可以在其中添加我的个性化文本，以便我可以插入个性化类别这是可能的？

【问题讨论】：

可能重复 - http://stackoverflow.com/questions/264640/how-can-i-create-an-editable-dropdownlist-in-html

标签： javascript html forms menu drop-down-menu

【解决方案1】：

也许你的意思是这样的：http://jsbin.com/ubihuw/edit#javascript,html 所以在php或其他东西中你可以检查“my_own_text”字段......不知道你会做什么;）

js:

$('.input').change(function()
{
  if($(this).attr('value') == "0") {
    $('#choose_own_text').append('<input type="text" id="my_own_text" name="my_own_text" value="Please type in .." />');
  } else {
    $('#choose_own_text').empty();
  }
});

你的代码...

<p><div id='contactform_category_errorloc' class='err'></div>

  <select name="category" class="input">
    <option value="0" selected="selected">
      [choose yours]
    </option>
    <option value="Arts and entertainment">Arts and entertainment</option>
    <option value="Automotive">Automotive</option>
    <option value="Business">Business</option>
    <option value="Computers">Computers</option>
    <option value="Games">Games</option>
    <option value="Health">Health</option>
    <option value="Internet">Internet</option>
    <option value="News and Media">News and Media</option>
    <option value="Recreation">Recreation</option>
    <option value="Reference">Reference</option>
    <option value="Shopping">Shopping</option>
    <option value="Sports">Sports</option>
    <option value="World">World</option>
  </select>
  <div id="choose_own_text"></div>
</p>

【讨论】：