Make jquery work with decimal option value

Question

I neeed help to make this snipper show values 5.5 and 6.5 (option value is decimal number)

$(function() {
  $('#percentage_select').change(function() {
    $('.rates').hide();
    $('#' + $(this).val()).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Select id="percentage_select" name="percentage">
  <option value="5">5%</option>
  <option value="5.5">5,5%</option>
  <option value="6">6%</option>
  <option value="6.5">6,5%</option>
  <option value="7">7%</option>
</Select>
<div id="5" class="rates"> <a href="#1">First link</a> </div>
<div id="5.5" class="rates" style="display:none"> <a href="#2">Second link</a> </div>
<div id="6" class="rates" style="display:none"> <a href="#3">Thirdlink</a> </div>
<div id="6.5" class="rates" style="display:none"> <a href="#4">Forth link</a> </div>
<div id="7" class="rates" style="display:none"> <a href="#5">Fifth link</a> </div>

I tried to make value as parse , but didn't succed.

Possible duplicate of [How to select html nodes by ID with jquery when the id contains a dot?](https://stackoverflow.com/questions/605630/how-to-select-html-nodes-by-id-with-jquery-when-the-id-contains-a-dot) — ADyson, Apr 12 '18 at 14:10
Nothing to do with parsing or decimals, the problem is ambiguity in your selector because of the dot (which is normally used to denote a CSS class). See the duplicate. — ADyson, Apr 12 '18 at 14:10
Also, please don't start your `id` with decimals. More on that [here](https://stackoverflow.com/a/79022/5530965). — dokgu, Apr 12 '18 at 14:12

ReadyFreddy · Accepted Answer · 2018-04-12T14:19:51.480

Since "." is using by jquery for catching elemets by their classes, i believe it creates a problem on this situation. You need to escape with "\\". You can use this example but know that this is a dirty way. For example if you will use this code with class selector and not with id selector like you do here, i bet it will create another problem for you. You have to use a better id format.

$(function() {
        $('#percentage_select').change(function(){
            $('.rates').hide();
            $('#' + $(this).val().replace(".","\\.")).show();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Select id="percentage_select" name="percentage">
                                <option value="5">5%</option>
                                <option value="5.5">5,5%</option>
                                <option value="6">6%</option>
                                <option value="6.5">6,5%</option>
                                <option value="7">7%</option>
                                </Select>
<div id="5" class="rates"> <a href="#1">First link</a> </div>
<div id="5.5" class="rates" style="display:none"> <a href="#2">Second link</a> </div>
<div id="6" class="rates" style="display:none"> <a href="#3">Thirdlink</a> </div>
<div id="6.5" class="rates" style="display:none"> <a href="#4">Forth link</a> </div>
<div id="7" class="rates" style="display:none"> <a href="#5">Fifth link</a> </div>

Please consider my advice about id format that you use here. Also it seems like you gave my answer an upvote but not checked as solution :). Good coding — ReadyFreddy, Apr 12 '18 at 14:21

Make jquery work with decimal option value

1 Answers1