Question

我有从数据库中选择项目的代码，当被选中时显示另一个列表框中的相应项目，但我希望第一个显示初始化，然后在从第一个项目中选择的项目时在不同的div中显示第二个。因此，当选择“选择车辆类型”时，我想要显示的“选择车辆”之后的那个。有问题将它们分开，因为任何帮助都会很棒。

代码是：

    <div style="margin-bottom: 15px" class="input-group">
 Select type of vehicle : <select name=category id=category>
<option value='' selected>Please select</option>
<?Php
require "config.php";// connection to database 
$sql="select * from category "; // Query to collect data 

foreach ($dbo->query($sql) as $row) {
echo "<option name=vehicle_type value=$row[cat_id]>$row[category]</option>";
}
?>
</div>

<div style="margin-bottom: 15px" class="input-group">
<span class="input-group-addon"><br></span></div>

<div><div style="margin-bottom: 15px" class="input-group">
</select>
Select vehicle : <select name=vehicle_id id=sub-category></select>

</div>
    </div>

Answer 1

你可以试试这个。我将第一个选择的结束标记从另一个选择的div中移出，添加了隐藏类和id 选择车辆。

HTML：

</select>
<div style="margin-bottom: 15px" class="input-group hide" id="select-vehicle">
    Select vehicle : <select name=vehicle_id id=sub-category></select>
</div>

CSS：

.hide {
    display: none;
}

jQuery的：

$( "#category" ).change(function() {
    if ($(this).find("option:selected").attr('value') == ''){
        // User removed type of vehicle. Hide the vehicle selection
        $( "#select-vehicle" ).addClass( "hide" );
    } else {
        // User chose type vehicle. Show the vehicle selection
        $( "#select-vehicle" ).removeClass( "hide" );
    }
});

编辑：

将列表选择拆分为DIV以显示何时选中

1 个答案: