显示取决于选择在下降的div含量降至

我在与一些jQuery的需要显示一个div取决于在下拉选择的选项的内容向下显示取决于选择在下降的div含量降至

下拉问题需要通过数值值转换为计算器以计算贷款金额，因此当我为选项值添加数字值并且相应的分隔符代码不起作用时。如果我将值和id更改为一个单词，它可以正常工作。

是否有解决此问题的方法是使用数值来使其工作。

<select name="apr" id="apr" class="loan-calculator__input" >     
      <option value="">Select</option> 
       <option value="4.7" class="good">Good</option> 
       <option value="14.9" class="fair">Fair</option> 
       <option value="29.9" class="poor">Poor</option> 
      </select> 
      </div> 
      <div id="4.7" style="display:none;" class="rating" ><p>Good - </p> 
</div> 
<div id="14.9" style="display:none;"class="rating" ><p>Fair</p> 
</div> 
<div id="29.9" style="display:none;" class="rating"><p>Poor </p> 
</div> 

(function($) { 
$(document).ready(function() { 
    $('#apr').change(function(){ 
     $('.rating').hide(); 
     $('#' + $(this).val()).show(); 
    }); 
    }); 
})(jQuery);

我创建了一个的jsfiddle显示代码 - http://jsfiddle.net/nineseven/W37np/

来源

2014-01-17 Jason Millward

使用数据属性，因为如果想让这些值的期权价值，你不能使用的编号为对象ID

<div data-selectvalue="4.7"/> 


    $("[data-selectvalue='"+$(this).val()+"']").show()

来源

2014-01-17 11:41:15 mikakun

非常感谢 - 这现在对我来说是 –

但这并不完全正确。你可以使用数字作为ID，只是没有小数 - > http://jsfiddle.net/W37np/19/ – Trace

我认为你需要抓住所选选项的值来代替。其他人也是对的 - 你的ID不适合。在演示中，我用破折号替换了它们。

$('#' + $(this).find('option:selected').val()).show();

Demo

来源

2014-01-17 11:38:02 Andy

它是不会当您使用十进制ID的工作。
我可能不会用这个工作流来显示内容。
但无论如何，在这里你必须基于字符串ID的小提琴：

http://jsfiddle.net/W37np/11/

(function($) { 
$(document).ready(function() { 
     $('#apr').change(function(){ 
      $('.rating').hide(); 
      $('#' + $("#apr option:selected").attr("value")).show(); 
     }); 
     }); 
    })(jQuery);

来源

2014-01-17 11:38:27 Trace

是的，这是我的想法。我可以添加一个类到选项并通过它来生成内容吗？ –

我不会使用show/hide的原因是因为您可能不会提前知道需要将多少内容加载到DOM中。这就是为什么我要使用'html（）'或append（）来创建单个页面应用程序（每次更新内容时不需要重新加载整个页面），并通过Ajax调用服务器来替换内容。 – Trace

这是行不通的，因为它被作为一种表达..不要使用数字

错误：语法错误，无法识别的表达式：＃14.9'

检查浏览器的错误控制台

来源

2014-01-17 11:40:52 tariq

，你可以改变div的ID不同的ID说班里的选项，那么你可以提取类如下，并显示它

$('#' + $("#apr option:selected").attr('class')).show();

fiddle demo

来源

2014-01-17 11:53:56 Saurabh

$(document).ready(function() { 
        $('#apr').change(function() { 
         $('.rating').hide(); 
         var prefix = "div-"; 
         $('#' + prefix + $("#apr option:selected").attr("value")).show(); 
        }); 
       }); 


<select name="apr" id="apr" class="loan-calculator__input" >     
       <option value="-1">Select</option> 
        <option value="123" class="good">Good</option> 
        <option value="456" class="fair">Fair</option> 
        <option value="789" class="poor">Poor</option> 
       </select> 
       <div id="div-123" style="display:none;" class="rating" ><p>Good - You are likely to have stable address and job history be on the electoral role and have plenty of good credit and no missed payments</p> 
</div> 
<div id="div-456" style="display:none;"class="rating" ><p>years carry a higher level of debt and perhaps missed the odd payment</p> 
</div> 
<div id="div-789" style="display:none;" class="rating"><p>Poor – May have missed made late payments or have CCJs and have frequently moved jobs or not be on the electoral role </p> 
</div>

由于ID不接受数值。您可以在div标签上使用前缀。

来源

2014-01-17 12:25:24 Kaptan

显示取决于选择在下降的div含量降至

回答

相关问题