2

我已根据下拉列表中选择的选项进行下拉选择并显示隐藏其他字段（在 div 内）。

此代码工作正常并根据选择显示隐藏，但是当我加载页面时，所有字段都是可见的。

另一件事是，例如，如果我想在选择选项 2 的情况下显示字段并将选项保存到数据库中，并且在重新加载页面时，它不会根据所选选项保存显示隐藏状态。

HTML

<select id="row1_layout_options" name="row1_layout_options">
    <option value="Select Layout Type">Select Layout Type</option>
    <option value="layout_type1">layout_type1</option>
    <option value="layout_type2">layout_type2</option>
    <option value="layout_type3">layout_type3</option>
    <option value="layout_type4">layout_type4</option>
    <option value="layout_type5">layout_type5</option>
    <option value="layout_type6">layout_type6</option>
    <option value="layout_type7">layout_type7</option>
    <option value="layout_type8">layout_type8</option>
</select>

<div id="row1_col1_layout_type2">
    <input type="text" class="qa-form-tall-text" value="" name="q2am_fp_row1_col1_layout_type2">
</div>

jQuery

$('#row1_layout_options').change(function() {
   $('#row1_col1_layout_type1, #row1_col1_layout_type2, #row1_col1_layout_type3').hide();
   $('#row1_col1_' + $(this).val()).show();
});

那么如何编写脚本，其中所有字段在页面加载时都隐藏，但它会根据所选选项保持显示隐藏状态。

4

3 回答 3

1

为所有包含内容的 div 分配一个公共类

根据选择显示隐藏但是当我加载页面时所有字段都是可见的

<div id="row1_col1_layout_type2" class="content">
                                        ^
                                        ----- This to target with a single selector

CSS

.content{
   display :none;
}

并且在JS中只需触发更改事件，以便显示带有选择的选项的 div

$('#row1_layout_options').change(function() {
   $('.content').hide();
   $('#row1_col1_' + $(this).val()).show();
   // Sen d an ajax request to save the value in DB
   $.ajax({

   });
}).change();  <--- Trigger the event

接下来是页面重新加载。网络是stateless. 所以它不会记住以前的状态。您唯一能做的就是在页面刷新后保留该值。也许作为cookie，本地存储或将其保存在服务器上并将其取回.. 检查小提琴

于 2013-07-24T06:24:07.710 回答
0

只需在document.ready

$(document).ready(function(){
    $('#row1_col1_layout_type1, #row1_col1_layout_type2, #row1_col1_layout_type3').hide();
    $('#row1_col1_' + $('#row1_layout_options').val()).show();

    $('#row1_layout_options').on('change',function() {
       $('#row1_col1_layout_type1, #row1_col1_layout_type2, #row1_col1_layout_type3').hide();
       $('#row1_col1_' + $(this).val()).show();
    });
});

这是小提琴

于 2013-07-24T06:31:25.123 回答
0

我建议为您加载的内容添加一个类，这将使它们隐藏起来。

HTML

<select id="row1_layout_options" name="row1_layout_options">
    <option value="Select Layout Type">Select Layout Type</option>
    <option value="layout_type1">layout_type1</option>
    <option value="layout_type2">layout_type2</option>
    <option value="layout_type3">layout_type3</option>
    <option value="layout_type4">layout_type4</option>
    <option value="layout_type5">layout_type5</option>
    <option value="layout_type6">layout_type6</option>
    <option value="layout_type7">layout_type7</option>
    <option value="layout_type8">layout_type8</option>
</select>

<div id="layouts">
    <div id="row1_col1_layout_type2">
        <input type="text" class="qa-form-tall-text" value="" name="q2am_fp_row1_col1_layout_type2">
    </div>
</div>

JS

$('#row1_layout_options').change(function() {
   $('#layouts>div.selected').removeClass('selected');
   $('#row1_col1_' + $(this).val()).addClass('selected');
});

CSS

#layouts>div{
    display:none;
}

#layouts>div.selected{
    display:block;
}

编辑：保存选择

至于保存所选选项，您有这些非详尽的解决方案列表：

  • HTML5 localstorage，您可以使用localStorage它是一个 javascript 可访问的存储，它像 cookie 一样被刷新。我不推荐我发现它非常不可靠的那个。
  • 服务器端持久化。基本上，当您在selected向 Web 服务发送查询时设置一个选项时，该选项将在某处（数据库、对象实例等）保存状态
  • 网址修改。这不是真正的持久性解决方案，但有时可以满足需求。您可以在 URL 参数部分中检索一个值，例如http://localhost/mysite?selectedId=2. 这样您就可以直接在链接中获取信息。更容易共享状态。
于 2013-07-24T06:43:43.023 回答