Question

我选择货币选项TH，Eu，USD。如果客户选择THB，价格将仅显示具有多个价格选项的THB价格但是当加载页面时我希望系统在页面加载时显示默认的THB价格，然后我们可以更改为我们或usd以后，请建议< / p>

                  /******************* JQUERY **************************/

          $(document).ready(function(){
         $('#theSelect').change(function(){
    var string = $(this).val();
    $('.hideStuff').slideUp('fast');
    $('.is'+string+'').delay(320).slideDown('fast');
       });
           });


              /****************** CSS **************************/
          .hideStuff {display: none;}


          /*************** HTML *************************************/

        <div class="selectContainer">
        <select id="theSelect">
        <option value="">- Select -</option>
        <option value="isTHB">THB</option>
        <option value="isUSD">USD</option>
        <option value="isEU">EU</option>
       </select>
       </div>
      <div class="hideStuff isTHB">3000 THB</div>
      <div class="hideStuff isUSD">50 USD</div>
      <div class="hideStuff isEU">40 EU</div>

Answer 1

如果你想暂时存储以前选择的值，你可能还必须使用jQuery Cookie插件（除非你没有从$ _GET或其他东西获取你的值）然后你可以从cookie加载它们页面加载。

你可以在改变时实现它：

$('#theSelect').change(function(){
   var string = $(this).val();
   $.cookie('currency', string);
....

在页面刷新时加载

$("#theSelect").val($.cookie('currency'));

查看https://github.com/carhartl/jquery-cookie

Answer 2

所以唯一的问题是，当页面加载时如何显示THB内容？

<div class="selectContainer">
    <select id="theSelect">
        <option value="">- Select -</option>
        <option value="isTHB" selected="selected">THB</option>
        <option value="isUSD">USD</option>
        <option value="isEU">EU</option>
   </select>
</div>
<div class="hideStuff isTHB" style="display:block;">3000 THB</div>
<div class="hideStuff isUSD">50 USD</div>
<div class="hideStuff isEU">40 EU</div>

...看起来你还在jQuery的最后一行添加了一个不必要的额外“是”。

将$('.is'+string+'')更改为$('.'+string)。

或者，如果您希望select的值为THB而不是isTHB，则可以取出前面的“is”并将其保留在jQuery上（{{1} }）。

以下完整代码......

'.is'+string

Answer 3

如果您希望下拉菜单为默认值，则应将选定内容添加到HTML

 <select id="theSelect">
        <option value="">- Select -</option>
        <option selected="selected" value="isTHB">THB</option>
        <option value="isUSD">USD</option>
        <option value="isEU">EU</option>
 </select>

然后如果您想要触发更改，您应该在jquery中添加它，或者如果您只是想显示它，那么只需做一个show：

$(document).ready(function(){
    $('#theSelect').change(function(){
        var string = $(this).val();
        $('.hideStuff').slideUp('fast');
        $('.' + string).delay(320).slideDown('fast');
    });

    $('#theSelect').change();

    // or

    $('.isTHB').show();
 });

jQuery用多个select来切换div

3 个答案: