根据下拉选择动态生成文本字段和相应的标签

Question

如果用户选择下拉菜单，航班号，则只能输入一个文本字段和相应的标签。如果用户选择下拉菜单，则应生成所有很多文本字段，例如用于获取航班号，来源，目的地等等。 “我希望使用JavaScript完成”，

以下代码根据我的要求运行，但是如何防止选择偏离普通表格对齐，

“一旦更改事件被调用，就进行下拉选择，根据选择进行生成必填字段，但是选择，下拉菜单会偏离结果中的常规对齐方式。”如何防止这种情况发生发生了，为什么会发生？？？”

<html>
<head>
    <title>hide/show</title>
    <script type="text/javascript">
        function display(obj,id1,id2)
        {
            txt=obj.options[obj.selectedIndex].value;
            document.getElementById(id1).style.display='none';
            document.getElementById(id2).style.display='none';
            if(txt.match(id1))
            {
                document.getElementById(id1).style.display='block';
            }
            if(txt.match(id2))
            {
                document.getElementById(id2).style.display='block';
            }
        }
    </script>
</head>
<body>
    <table cellspacing="0" cellpadding="2">
        <thead>
            <tr>
                <td class="title">Type:</td>
                <td class="field">

                    <select name="type" onchange="display(this,'text','image');">
                        <option>Please select option</option>
                        <option value="image">image</option>
                        <option value="text">texts</option>
                        <option value="invisible">invisible</option>
                    </select>
                </td>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <td class="align-center" colspan="2">
                    <input type="submit" name="submit" value="update"/>
                    <input type="reset" value="reset"/>
                </td>
            </tr>
        </tfoot>

        <tbody id="text" style="display: none;">
            <tr>
                <td class="title" rowspan="3">Text Color:</td>
                <td class="field">
                    <input type="text" name="color" size="8" maxlength="7"/>
                </td>
            </tr>
        </tbody>

        <tbody id="image" style="display: none;">
            <tr>
                <td class="title">Image:</td>
                <td class="field">
                    <input type="text" name="image" size="15"/>
                </td>
            </tr>

            <tr>
                <td class="title">X Coordinates:</td>
                <td class="field">
                    <input type="text" name="x_coordinate" size="15"/>
                </td>
            </tr>

            <tr>
                <td class="title">Y Coordinates:</td>
                <td class="field">
                    <input type="text" name="y_coordinate" size="5"/>
                </td>
            </tr>

            <tr>
                <td class="title">Text Color:</td>
                <td class="field">
                    <input type="text" name="color" size="8" maxlength="7"/>
                </td>
            </tr>
        </tbody>

        <tbody>
            <tr>
                <td class="title">Display:</td>
                <td class="field">
                    <select name="diplay">
                        <option value="visitors">Visitors</option>
                        <option value="hits">Hits</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
</body>

Answer 1

您可以根据条件使用variable_name.setVisible(boolean_value)属性隐藏或取消隐藏元素。 如果要隐藏搜索按钮，则可以使用JsearchButton.setVisible(false); 这里的JsearchButton是搜索按钮的变量名。 请参阅我为您的要求编写的示例。 我希望这是有用的。

该构造函数最初使应用程序启动后所有元素都不可见。

  public class AirportForm extends javax.swing.JFrame {

    /**
     * Creates new form AirportForm
     */
    public AirportForm() {
        initComponents();
        FlightNo.setVisible(false);
            EnterFlightNoTextBox.setVisible(false);
            From.setVisible(false);
            To.setVisible(false);
           SelectFromStationDropDown.setVisible(false);
           SelectToStationDropDown.setVisible(false);
    }

这是用于下拉用户选择的代码。 根据用户选择，将显示元素。

private void SelectSearchCriteriaActionPerformed(java.awt.event.ActionEvent evt) {                                                     
    // TODO add your handling code here:

    String search1="Flight No";
    String search2="All";
    String search3="Select An Item";

    if(SelectSearchCriteria.getSelectedItem().toString()==search1){
        FlightNo.setVisible(true);
        EnterFlightNoTextBox.setVisible(true);
        From.setVisible(false);
        To.setVisible(false);
       SelectFromStationDropDown.setVisible(false);
       SelectToStationDropDown.setVisible(false);
    }
    else if(SelectSearchCriteria.getSelectedItem().toString()==search2){
        FlightNo.setVisible(true);
        EnterFlightNoTextBox.setVisible(true);
        From.setVisible(true);
        To.setVisible(true);
       SelectFromStationDropDown.setVisible(true);
       SelectToStationDropDown.setVisible(true);
    }
}

这是为了声明元素

// Variables declaration - do not modify                     
private javax.swing.JTextField EnterFlightNoTextBox;
private javax.swing.JButton FinalSearchButton;
private javax.swing.JLabel FlightNo;
private javax.swing.JLabel From;
private javax.swing.JComboBox SelectFromStationDropDown;
private javax.swing.JComboBox SelectSearchCriteria;
private javax.swing.JLabel SelectSearchType;
private javax.swing.JComboBox SelectToStationDropDown;
private javax.swing.JLabel To;
// End of variables declaration

根据下拉选择动态生成文本字段和相应的标签

问题描述

1 个解决方案

解决方案1
0 2015-10-01 02:35:37

根据下拉选择动态生成文本字段和相应的标签

问题描述

1 个解决方案

解决方案1 0 2015-10-01 02:35:37

解决方案1
0 2015-10-01 02:35:37