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

时间:2015-10-01 02:18:24

标签: javascript select

如果用户选择下拉,航班号,则只有一个文本字段和相应的标签应该进入。如果用户选择下拉列表,则应生成所有多个文本字段,例如获取航班号的输入,来源,目的地等。 "我希望使用JavaScript",

完成它
  

以下代码按照我的要求工作,但是如何防止select远离正常的表格对齐,

"一旦调用更改事件,就会进行下拉选择,根据所做的选择生成必需的字段,但是选择,下拉移动远离正常对齐结果。 "如何防止这种情况发生?为什么会发生这种情况?"

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

1 个答案:

答案 0 :(得分:0)

您可以使用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