在HTML中更改选择选项时更改表单字段

时间:2015-04-26 17:32:59

标签: javascript php jquery html

好的,我有一个如下代码

$(document).ready(function(){
  $('#Topic').change(function(){
    $('[name="keycategory[]"]').prop('disabled', false);
    selection = $(this).val();    
    switch(selection)
    { 
      case 'Sport':
        $('#Sport').show();
        $('#Entertainment').hide();
        $('#Entertainment[name="keycategory[]"]').prop('disabled', true);
        break;
      case 'Entertainment':
        $('#Entertainment').show();
        $('#Sport').hide();
        $('#Sport[name="keycategory[]"]').prop('disabled', true);
        break;
      default:
        $('#Sport').hide();
        $('#Entertainment').hide();
        $('#Sport[name="keycategory[]"], #Entertainment[name="keycategory[]"]').prop('disabled', true);
        break;
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="testing.php">
  <select name="Topic" id="Topic">
    <option disabled selected> -- Select Topic -- </option>
    <option value="Sport">Sport</option>
    <option value="Entertainment">Entertainment</option>
  </select>

  <!--Topic: Sport-->
  <div id="Sport" style="display:none">
    Soccer <input type="text" name="keycategory[]">
    <br>
    Basketball <input type="text" class="form-control" name="keycategory[]">
  </div>

  <!--Topic: Music-->
  <div id="Entertainment" style="display:none">
    Movie <input type="text" class="form-control" name="keycategory[]">
    <br>
    Music <input type="text" class="form-control" name="keycategory[]">
  </div>
</form>

使用上面的代码,我将获得keycategory [] = 4的大小。我的问题是,如何仅使用所选主题发送keycategory []而不区分名称。这是因为我有一个php文件,它有一个接收keycategory []的函数,尽管选择了主题

1 个答案:

答案 0 :(得分:1)

在你的case / switch语句中,修改它们以禁用隐藏的div输入,如

    case 'Sport':
        $('#Sport').show();
        $('#Entertainment').hide();
        $('#Entertainment [name="keycategory[]"]').attr('disabled', 'disabled');
            break;
    case 'Entertainment':
        $('#Entertainment').show();
        $('#Sport').hide();
        $('#Sport [name="keycategory[]"]').attr('disabled', 'disabled');
        break;
    default:
        $('#Sport').hide();
        $('#Entertainment').hide();
        $('#Sport [name="keycategory[]"], #Entertainment [name="keycategory[]"]').attr('disabled', 'disabled');
        break;

这将阻止它们与表单一起提交。 另外,不要忘记重置&#39;在switch语句之前启用它们的字段

    $('[name="keycategory[]"]').prop('disabled', false);
    switch(selection)
    {
       .
       .