Question

我想用JS来解决问题（这不是我的强项）。我在这里设置了一个小提琴：fiddle

这是我正在使用的代码：

function find_select(){
if (document.getElementById("nsp").selected == true)
{
    document.getElementById('nsp_form').style.display = 'block';
    document.getElementById('feedback_form').style.display = 'none';
}
else if (document.getElementById("feedback").selected == true)
{
    document.getElementById('nsp_form').style.display = 'none';
    document.getElementById('feedback_form').style.display = 'block';
}
else if (document.getElementById("pre_alerts_yes").selected == true)
{
    document.getElementById('nsp_form').style.display = 'block';
    document.getElementById('pre_alerts_yes').style.display = 'block';
    document.getElementById('feedback_form').style.display = 'none';
}   

else{
    document.getElementById('nsp_form').style.display = 'none';
    document.getElementById('feedback_form').style.display = 'none';
}
}

我希望发生的事情是当有人选择“发送预警”选项时，它会再打开一个下拉框，显示发送预警选项的类型。但我没有这样做，特别是在：

if (document.getElementById("pre_alerts_yes").selected == true)

因此，需要检查nsp框是否也是打开的，因为pre_alerts_yes仅显示nsp框是否打开并选择为true。对于冗长的写作感到抱歉，但需要了解它。

基本上是一种链式选择方法，可能会发生3级丢弃。也许一双新鲜的眼睛可以告诉我我做错了什么，因为最后的“pre_alerts_yes”并没有扩大最后的方框。

Answer 1

如果你想打开pre_alerts_yes，你必须首先显示nsp_form，因为pre_alerts_yes nsp_form div下display:none;首先display:block; {{1}} {{1}} }}

Answer 2

尝试命名不同的id并使用jquery使用类似的东西

    <label for="input_title">Phone Type:</label>
<select name="phone_type" id="select_form" class="input-block-level" >
    <option id="blank" value="blank"></option>
    <option id="blank" value="house">House Phone</option>
    <option id="nsp" value="cellphone">Normal Cell (Non Smart Phone)</option>
    <option id="feedback" value="smartphone">SmartPhone</option>
</select>
<div id="nsp_form" style="display: none;">
    <label for="input_title">Send Pre-Alerts:</label>
    <select name="pre_alerts" id="pre_alerts_yes_open" class="input-block-level" >
        <option id="blank" selected="selected"></option>
        <option value="pre_alerts_yes">Yes</option>
        <option value="normal_cell">No</option>
    </select>

    <div id="pre_alerts_yes_form" style="display: none;">
        <label for="input_title">Pre-Alerts Type:</label>
        <select name="pre_alerts" id="pre_alerts_from" class="input-block-level" >
            <option value="pre_alerts_yes">Yes</option>
            <option value="normal_cell">No</option>
        </select>
    </div>

    <label for="input_title">Alert Type:</label>
    <select name="cell_type" class="input-block-level">
        <option value="house">SMS Message (Standard)</option>
        <option value="normal_cell">SMS Message (Customized)</option>
        <option value="smart_phone">Phone Call (Standard Voice)</option>
        <option value="smart_phone">Phone Call (Customized Voice)</option>
        <option value="smart_phone">Phone Call (Audio Call)</option>
        <option value="smart_phone">Phone Call (Audio Prompt Call)</option>
    </select>
</div>
<div id="feedback_form" style="display: none;">feedback</div>

和jquery一样

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    $('#select_form').on('change',function()
    {
        if ( $(this).val() == 'cellphone' ) {
            $('#nsp_form').show();
            $('#feedback_form').hide();
        } else if ( $(this).val() == 'smartphone' ) {
            $('#nsp_form').hide();
            $('#feedback_form').show();
        } else {
            $('#nsp_form').hide();
            $('#feedback_form').hide();         
        } 
    });

    $('#pre_alerts_yes_open').on('change',function(){
        if ( $(this).val() == 'pre_alerts_yes') {
            $('#nsp_form').show();
            $('#feedback_form').hide();
            $('#pre_alerts_yes_form').show();
        } else {
            $('#nsp_form').hide();
            $('#feedback_form').hide(); 
        }
    });
  <script>

澄清js检查

2 个答案: