如何使用 jquery 下拉菜单在 ID (html 标记)中选择带有空格的值

Question

我在另一个主题中找到了一个有用的jquery代码(根据下拉列表中选择的选项显示文本(，以根据下拉列表选择显示文本。

但是，我的 ID 有空格，代码不适用于空格。我没有完全访问权限 shopify 代码/后端来摆脱空格(进一步澄清：shopify 将仅使用下拉文本的名称作为值，因此是空格(

谁能帮忙修复下面的代码？

非常感谢！！

$('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 小提琴

Answer 1

您可以使用 CSS 属性选择器作为通过 id 选择元素的另一种方法。

CSS 选择器#myId将选择与 [id="myId"] 相同的元素。它们实际上是相同的，#选择器的单个不同具有更大的特异性。

// So instead of using
$("#14 days")  // or
$("#" + a)
// Try using
$("[id='14 days']")  // and
$("[id='" + a + "']")

Answer 2

我不知道

为什么你的ID中有空格。但是，如果这是您无法解决并且绝对需要解决方案的事情。

更改脚本，如下所示。

<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>

改用这个

<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>