动态 html 表单

发布于 2024-09-19 17:34:32 字数 3051 浏览 2 评论 0原文

我正在研究动态形式。我有一个单选按钮，如果用户选择一个单选按钮，我想根据单选按钮值填充一个下拉菜单。

例如。如果单选按钮 value=value1 显示 3 个项目（苹果、香蕉、芒果）的下拉菜单，

例如。如果单选按钮 value=value2 显示 5 个项目的下拉菜单（苹果、香蕉、芒果、杏子、ornage）

等。我使用 css 来隐藏和显示下拉菜单。

（1）我遇到的问题是，当我将表单插入

时，这不起作用；当我删除表格标签时它就起作用了。这有点奇怪......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--

function changeDiv(the_div,the_change)
{
  var the_style = getStyleObject(the_div);
  if (the_style != false)
  {
    the_style.display = the_change;
  }
}

function hideAll()
{
  changeDiv("main_category","none");
  changeDiv("another_category","none");
  changeDiv("other_category","none");
}

function getStyleObject(objectId) {
  if (document.getElementById && document.getElementById(objectId)) {
    return document.getElementById(objectId).style;
  } else if (document.all && document.all(objectId)) {
    return document.all(objectId).style;
  } else {
    return false;
  }
}
// -->
</script>
</head>

<body>
<table>

<tr>
  <td align="right" valign="top">Main Category:</td>
  <td>
  <input type="radio" name="main_cat" onClick="hideAll(); changeDiv('main_category','block');" value="value1">value1<br />
  <input type="radio" name="main_cat" onClick="hideAll(); changeDiv('main_category','block');" value="value2">value2<br />
  <input type="radio" name="main_cat" onClick="hideAll(); changeDiv('main_category','block');" value="value3">value3<br />
  <input type="radio" name="main_cat" onClick="hideAll(); changeDiv('main_category','block');" value="value4">value4
  </td>
</tr>


<div id="main_category" style="margin-left:30px;display:none">
<tr>
  <td align="right">Options:</td>
  <td></td>
</tr>
</div>

<tr>
  <td align="right">Aanother Category:</td>
  <td>
  <input type="radio" name="another_cat" onClick="hideAll(); changeDiv('another_category','block');" value="Yes">Yes
  <input type="radio" name="another_cat" value="No">No
  </td>
</tr>


<div id="another_category" style="margin-left:30px;display:none;">
<tr>
  <td align="right">Other Category:</td>
  <td>

  </td>
</tr>

<tr>
  <td align="right">Interest:</td>
  <td>

  </td>
</tr>
</div>





</table>
</body>
</html>

（2）第二个问题是，我有第二个单选按钮，如下所示：例如。如果单选按钮 value=value1 显示 3 个项目的下拉菜单（苹果、香蕉、芒果）例如。如果单选按钮 value=value2 显示 5 个项目的下拉菜单（苹果、香蕉、芒果、杏子、ornage）等。我使用 css 来隐藏和显示下拉菜单。

现在的技巧是，如果我已经选择了 value=value1，我不想在第二个单选按钮中再次显示 value1，

非常感谢任何帮助/建议。

原文

I am working on dynamic form.
i have a radio button, if a user select a radio button, i want to populate a drop down menu based on the radio button values.

eg. if radio button value=value1 show drop menu of 3 items (apple, banana, mango)

eg. if radio button value=value2 show drop menu of 5 items (apple, banana, mango,apricot, ornage)

etc. I have used css to hide and show the drop down menu.

(1) the problem i am having is, this doesn't work when i insert my form in a <table></table>; when i remove the table tags it works. its a bit strange...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--

function changeDiv(the_div,the_change)
{
  var the_style = getStyleObject(the_div);
  if (the_style != false)
  {
    the_style.display = the_change;
  }
}

function hideAll()
{
  changeDiv("main_category","none");
  changeDiv("another_category","none");
  changeDiv("other_category","none");
}

function getStyleObject(objectId) {
  if (document.getElementById && document.getElementById(objectId)) {
    return document.getElementById(objectId).style;
  } else if (document.all && document.all(objectId)) {
    return document.all(objectId).style;
  } else {
    return false;
  }
}
// -->
</script>
</head>

<body>
<table>

<tr>
  <td align="right" valign="top">Main Category:</td>
  <td>
  <input type="radio" name="main_cat" onClick="hideAll(); changeDiv('main_category','block');" value="value1">value1<br />
  <input type="radio" name="main_cat" onClick="hideAll(); changeDiv('main_category','block');" value="value2">value2<br />
  <input type="radio" name="main_cat" onClick="hideAll(); changeDiv('main_category','block');" value="value3">value3<br />
  <input type="radio" name="main_cat" onClick="hideAll(); changeDiv('main_category','block');" value="value4">value4
  </td>
</tr>


<div id="main_category" style="margin-left:30px;display:none">
<tr>
  <td align="right">Options:</td>
  <td></td>
</tr>
</div>

<tr>
  <td align="right">Aanother Category:</td>
  <td>
  <input type="radio" name="another_cat" onClick="hideAll(); changeDiv('another_category','block');" value="Yes">Yes
  <input type="radio" name="another_cat" value="No">No
  </td>
</tr>


<div id="another_category" style="margin-left:30px;display:none;">
<tr>
  <td align="right">Other Category:</td>
  <td>

  </td>
</tr>

<tr>
  <td align="right">Interest:</td>
  <td>

  </td>
</tr>
</div>





</table>
</body>
</html>

(2) second question is, i have a second radio buttons like this:
eg. if radio button value=value1 show drop menu of 3 items (apple, banana, mango)
eg. if radio button value=value2 show drop menu of 5 items (apple, banana, mango,apricot, ornage) etc. I have used css to hide and show the drop down menu.

now the trick is, if i already selected value=value1, i don't want to show value1 again in the second radio button

any help/suggestions is greatly appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

萌化 2024-09-26 17:34:32

试试这个

<html>
    <head>
        <script type="text/javascript">
                     var comList= new Array("apple","banana","mango");
                     var list = new Array("orage", "apricot");
                     var val1selected = 0;  

             function loadDropDown(option){
                         setSelectdVal(option)
                         createDropDown(option)
                     }  
                 function setSelectdVal(option){
                         if (option == 1){
                           val1selected = 1; 
                         } 
                     }       

                     function createDropDown(option){
                        html = "";
                        html = html + '<select id="id">'
                        var arr = getArray(option);
                        for (var i=arr.length-1; i>=0; --i ){
                            html = html + '<option value="' + i + '">' + arr[i] + '</option>' 
                        }
                        html = html + '</select>'
                        document.getElementById('selectTag').innerHTML = html;
             }
                     function getArray(option){
                        var a = comList;
                        if ((option == 2) && (val1selected == 0)){
                           a = comList.concat(list)
                        }
                        return a;
                     }

                </script>
    </head>
        <body>
        <table>
                    <tr>
                        <td><input type="radio" name="options" onClick=loadDropDown(1);>value1</td>
                        <td><input type="radio" name="options" onClick=loadDropDown(2);>value2</td>
                    </tr>
            <tr>
                        <td></td>
                        <td id="selectTag"></td>
                    </tr>   
                </table>
        </body> 
</html>

try this

<html>
    <head>
        <script type="text/javascript">
                     var comList= new Array("apple","banana","mango");
                     var list = new Array("orage", "apricot");
                     var val1selected = 0;  

             function loadDropDown(option){
                         setSelectdVal(option)
                         createDropDown(option)
                     }  
                 function setSelectdVal(option){
                         if (option == 1){
                           val1selected = 1; 
                         } 
                     }       

                     function createDropDown(option){
                        html = "";
                        html = html + '<select id="id">'
                        var arr = getArray(option);
                        for (var i=arr.length-1; i>=0; --i ){
                            html = html + '<option value="' + i + '">' + arr[i] + '</option>' 
                        }
                        html = html + '</select>'
                        document.getElementById('selectTag').innerHTML = html;
             }
                     function getArray(option){
                        var a = comList;
                        if ((option == 2) && (val1selected == 0)){
                           a = comList.concat(list)
                        }
                        return a;
                     }

                </script>
    </head>
        <body>
        <table>
                    <tr>
                        <td><input type="radio" name="options" onClick=loadDropDown(1);>value1</td>
                        <td><input type="radio" name="options" onClick=loadDropDown(2);>value2</td>
                    </tr>
            <tr>
                        <td></td>
                        <td id="selectTag"></td>
                    </tr>   
                </table>
        </body> 
</html>

回复收藏 0 原文