-3

如何区分“f1”和“f2”的“选择名称”目前都命名为“subcat”，同时仍然只有 1 个 subcat 变量？此代码仅在 cat value=2 时才能正常工作，如果 cat value=1 则 subcat value 始终 =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>
4

4 回答 4

3

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

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

使用 PHP 可以POST像这样访问（如果 ed）：

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

于 2012-08-07T18:48:36.697 回答
2

我已经更改了很多代码以使其成为有效的 html，并且也可以按照我“认为”的方式工作，因为您的问题并没有说得很清楚。

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

  1. 更改了 ID 以明确它们的用途。
  2. 删除了重复的 ID。
  3. 正确关闭你的桌子。
  4. 完全改变你的 JavaScript 来显示和隐藏某些选择的
  5. 还有很多事情我已经忘记了。

请看这个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;           
  }            
});​​
于 2012-08-07T19:09:01.307 回答
0

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

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

ps ID 应该是唯一的。

于 2012-08-07T18:46:59.677 回答
0 
document.getElementById('f2').getElementsByTagName('select')[0]

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

于 2012-08-07T18:49:11.300 回答