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