Question

如何区分'f1'和'f2'的'select name'，这两个名字当前都命名为'subcat'，同时仍只有1个subcat变量？仅当cat值= 2时，此代码才能正常工作，如果cat值= 1，则subcat值始终= 0

<?php    
$cat=$_POST['cat'];
$subcat = $_POST['subcat'];
?>
<form action='submitsite.php' method='POST'>
    <table>
        <tr>
            <td>category(optional)</td>
            <td>
                <select name='cat' id = "opts" onchange = "showForm()">
                    <option value = "0">Select</option>
                    <option value = "1">music </option>
                    <option value = "2">film </option>
                </select> 
                <div id = "f1" style="display:none">
                    <select name='subcat' id = "opts" onchange = "showForm()">
                        <option value = "0">Select</option>
                        <option value = "3">pop</option>
                        <option value = "4">rock </option>
                    </select>
                </div>
                <div id = "f2" style="display:none">
                    <select name='subcat' id = "opts" onchange = "showForm()">
                        <option value = "0">Select</option>
                        <option value = "5">comedy</option>
                        <option value = "6">drama</option>
                    </select>
                </div>
    </form>
</div>

<script type = "text/javascript">
    function showForm(){
        var selopt = document.getElementById("opts").value;

        if (selopt == 1) {
            document.getElementById("f1").style.display="block";
            document.getElementById("f2").style.display="none";
        }
        if (selopt == 2) {
            document.getElementById("f2").style.display="block";
            document.getElementById("f1").style.display="none";
        } 
    }
</script>

Answer 1

将[]添加到名称中。然后，选择将在提交时被解释为数组。

<select name="subcat[]">...</select>

使用PHP可以访问（如果POST），如下所示：

<?php

    $subCatArr = $_POST['subcat'];

    $firstIndex = $subCatArr[0];
    $secondIndex = $subCatArr[1];

哦是的，在HTML中重复使用ID是无效的。它们必须唯一。

更新在更好地理解OP的意图之后：

如果我理解这个意大利面条代码的意图（这是一个昵称，OP），用户可以选择一个类别和一个子类别，这是基于他/她选择的类别。然后，用户提交表单，并将该选择记录在数据库中。

首先，让我们摆脱table元素的使用，因为它们是不必要的。其次，您只需要一个select作为子类别。

<form action='submitsite.php' method='POST'>
    <label>category(optional)</label>
    <select name='cat' id = "opts" onchange = "showForm()">
        <option value = "0">Select</option>
        <option value = "1">music </option>
        <option value = "2">film </option>
    </select> 
    <div id="subcatDiv" style="display:none;">
        <select name='subcat' id='opts'></select>
    </div>
    .
    .
    .
    <input type='submit' />
</form>

我们可以将其留空，因为它无论如何都没有显示。

现在，当用户进行更改时，我们会显示相应的子类别，或者我们只会再次隐藏div：

<script type = "text/javascript">
    function showForm(){
        var selopt = document.getElementById("opts");
        var seloptVal = selOpt.value;
        var subcatDiv = document.getElementById("subcatDiv");

        var options = "";
        switch(seloptVal * 1) {
            case 1:
                options = "<option value='0'>Select</option>" + 
                    "<option value='3'>pop</option>" + 
                    "<option value='4'>rock</option>";
                break;
            case 2:
                options = "<option value='0'>Select</option>" + 
                    "<option value='5'>comedy</option>" + 
                    "<option value='6'>drama</option>";
                break;
            default:
                break;
        }

        if (options == "") {
            subcatDiv.style.display = "none";
            selopt.innerHTML = options;
        } else {
            selopt.innerHTML = options;
            subcatDiv.style.display = "block";
        }
    }
</script>

现在你只需处理一个select子类别。

Answer 2

我已经修改了很多代码以使其成为有效的HTML，并且我也“想”你想要它，因为你的问题没有说清楚。

以下是我必须做出的修正清单：

更改了ID以清楚说明它们的用途。
删除了重复的ID。
正确关闭你的桌子。
完全更改了您的JavaScript以显示和隐藏某些选择
我忘记了更多的事情。

请参阅此jsfiddle。

修正了html：

<form action='submitsite.php' method='POST'>
  <table>
    <tr>
      <td>category(optional)</td>
      <td>
         <select name="cat" id="selectType">
           <option value="0">Select</option>
           <option value="1">music</option>
           <option value="2">film</option>
         </select> 

         <div id="f1" style="display:none">
           <select name='music' id="selectMusic">
             <option value="0">Select</option>
             <option value="3">pop</option>
             <option value="4">rock</option>
           </select>
         </div>

         <div id="f2" style="display:none">
           <select name="type" id="selectFilm">
             <option value="0">Select</option>
             <option value="5">comedy</option>
             <option value="6">drama</option>
           </select>
         </div>
       </td>
     </tr>
   </table>      
 </form>

修正了JavaScript：

$("#selectType").change(function() {

  var selected = $(this).val();
  $("#f1, #f2").hide();

  switch (selected) {
    case "1":
      $("#f1").show();
      break;

    case "2":
      $("#f2").show();
      break;           
  }            
});

Answer 3

document.forms[0].subcat将是一个数组。

document.forms[0].subcat[0]将是第一个实例，等等。

P.S。 ID应该是唯一的。

Answer 4

document.getElementById('f2').getElementsByTagName('select')[0]

顺便说一句，您通过重复使用ID违反了HTML标准。

区分相同的选择名称

4 个答案: