下拉菜单html表单个性化类别

时间:2011-09-03 19:05:44

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

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

<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>

我希望在下拉菜单中添加一个带有值的选项:“自定义”,当我选择此选项时,在字段空白下方显示为输入文本,我可以添加我的个性化文本,以便我可以插入个性化类别 这是可能的?

1 个答案:

答案 0 :(得分: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>