0

I found a useful jquery code in another topic (Show text based on option selected in dropdown) to show text depending on a dropdown selection.

However, my IDs have spaces and the code doesnt work with that. I don't have full access to the shopify code / backend to get rid of the spaces (for further clarification: shopify will just use the name of the drop down text as values, hence the spaces)

Could anyone help how to fix the code below?

Thank you so much!! 

$('p').hide();
$('#14 Days').show();
$('select').change(function() {
$('p').hide();
  var a = $(this).val();
  $("#" + a).show();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select class="bootstrap-select">
  <option value="14 Days" selected="selected">Feature 1</option>
  <option value="28 Days">Feature 2</option>
</select>
<div>
  <p id="14 Days">Save 25% with the 28 Days size!</p>
</div>
<div>
  <p id="28 Days">Great! You are now saving 25%!</p>
</div>

JS FIDDLE

AlphaX
  • 615
  • 1
  • 11
  • 25

2 Answers2

1

You can use CSS attribute selectors as another way of selecting elements by id.

The CSS selector #myId will select the same elements as [id="myId"]. They are practically the same, with the single different of the # selector having greater specificity.

// So instead of using
$("#14 days")  // or
$("#" + a)

// Try using
$("[id='14 days']")  // and
$("[id='" + a + "']")
iMoses
  • 4,338
  • 1
  • 24
  • 39
techfun679
  • 66
  • 7
1

I don't know why you have spaces in you ID. But if it is something that you can't work around with and absolutely need a solution.

Change your script as below.

<script>
$('p').hide();

var a = $(".bootstrap-select").val();
$("div > p").each(function(i){
   if(this.id == a){
    $(this).show();
  }
});

$('select').change(function() {
    $('p').hide();
    a = $(this).val();
    console.log(a);
    $("div > p").each(function(i){
      if(this.id == a){
        $(this).show();
      }
 });
});
</script>

Use this instead

<script>
var val = $('.single-option-selector').val();
var sid = val.split(" ").join("_");
$("#"+sid).css("color","black");
$(document).ready(function(){
$('.single-option-selector').change(function(){
  $(".white-hidden-text p").css("color","white");
  val = $(this).val();
  sid = val.split(" ").join("_");
  console.log(sid);
  $("#"+sid).css("color","black");
});
});
</script>
Harish Iyer
  • 66
  • 7
  • Hi Harish, thank you! The code seems to have an error though. Could you please double check? The reason why my IDs have spaces is because it's part of shopify and I dont have full access to amend only the IDs. Many thanks! – AlphaX Apr 23 '19 at 21:39
  • 1
    Can you let me know where are you getting the error? Because i used your script which you pasted above and modified it. Probably a snapshot of the console could be more helpful. – Harish Iyer Apr 23 '19 at 21:46
  • Error solved, my bad sorry. It seems to almost work! https://jsfiddle.net/swcro4hj/8/ the only problem is that it doesnt show the text for 14 Days (= default) on page load. Do you know how to fix this? – AlphaX Apr 23 '19 at 21:51
  • 1
    Well I updated the code. Maybe this is what you need. – Harish Iyer Apr 23 '19 at 22:10
  • This may be happening because the code needs to executed after the DOM is loaded. Put my code inside $(document).ready(function(){//mycode}); ..This would ensure that scripts get executed after your page is loaded. Currently it is trying to find all p tags even before the page is loaded. Hence a good practice is to append scripts at the footer and not the header. Hope it helps! – Harish Iyer Apr 24 '19 at 22:06
  • I have amended the code as per the edit in your answer above (see added code), but it's still not working when testing by adding the HTML lines manually via Firefox Inspector. Any idea? – AlphaX Apr 24 '19 at 22:17
  • if you inspect you code, you might see that your select does not have an ID attribute, it has a value attribute and where are the 2 discount messages that you want to show up in the site. I cannot see it. – Harish Iyer Apr 25 '19 at 14:36
  • Hi Harish, I had to take out your code as it was breaking the page for some reason (a lot of content wasnt visible anymore). The two discount messages are at the bottom of the page, but they are in white so that they are hidden and not visible to live customers right now (if you select the the area after the related product it will be visible). Do you know how the code would need to be amended to make the text work based on the 'packet size' drop down menu? Your help would be much appreciated! – AlphaX Apr 25 '19 at 20:21
  • 1
    I have changed the code, look at the modified code in my answer, you need to change you id's of the discount label from days_14 to 14_Days and days_28 to 28_Days for the above code to work. And you can try changing this as per your site. The previous code did not work for you because it is a pretty generic code, it effects all the div and p tags in the site. – Harish Iyer Apr 25 '19 at 21:47
  • I have changed the IDs as you suggested and updated the script. However, when selecting the hidden (white) text you will see that they are both there and dont change on selection in the drop down, while only the text with ID 14_Days should show at default and then disappear and only text for ID 28_Days should show. I saw in the upgraded script that you implemented something with the colors. To clarify, I have only made the text white so that this is all hidden until it works so that live customers dont see any of this. The functionality should work via a display function not changing colours. – AlphaX Apr 26 '19 at 21:15
  • 1
    I used color because you used CSS property color to hide the text. A good approach would be to hide the div or p tag and use jquery show and hide method to toggle your discounts. My suggestion would be start using a dev environment. Else things can screw up big time in production. – Harish Iyer Apr 26 '19 at 21:56