根据选择选项中的值更改 Div Class答案

【问题标题】：Change Div Class depending on value in select option根据选择选项中的值更改 Div Class
【发布时间】：2023-03-07 04:31:01
【问题描述】：

我有一个带有选项的选择下拉菜单，我想根据下拉菜单中的选择显示某个 div。

从技术上讲，我相信最简单的方法是通过应用正确的 css 类将不应该只显示为 display: none 的 div 设置为可见。

但是，我不知道如何创建相应的 JS/jQuery 代码。在过去的半小时内，我在这里查看了其他解决方案，但它们对他们的问题更为独特，而我相信我的解决方案可能非常简单。

有人可以帮我吗？

非常感谢！！

最好，大卫

$(document).ready(function () {
    $("#LooseTea").hide();
    $('#PyramidBags').show();
    $('#ProductSelect-product-template-option-0').change(function () {
        if($("#ProductSelect-product-template-option-0").val()=="Loose Tea")
        {
          $("#LooseTea").show();
          $("#PyramidBags").hide();
        }
        else
        {      
          $("#PyramidBags").show();
          $("#LooseTea").hide();
        }
    })
});

<select id="ProductSelect-product-template-option-0">
  <option value="Pyramid Bags">Praymid Bags</option>
  <option value="Loose Tea">Loose Tea</option>
</select>

<div class="">
  <p>This text is about the first product</p>
</div>

<div class="">
  <p>This textis about the second product</p>
</div>

【问题讨论】：

查看此Stack Overflow question 接受的答案。 JSFiddle demo 展示了它的实际应用。希望对您有所帮助。
谢谢迈克，看起来不错！我会试试的！
我喜欢这个代码，但是如果我的选项值中有空格，有没有办法使用它？它似乎总是打破代码

标签： javascript jquery css

【解决方案1】：

给你！

var product1 = document.getElementById("product1");
var product2 = document.getElementById("product2");
var productselection = document.getElementById("productselection");

productselection.addEventListener("change", function(){
  if(productselection.value === 'PyramidBags'){
    product1.classList.add('CLASS');
    if(product2.classList.contains('CLASS')){
      product2.classList.remove('CLASS');
    }
  }
  if(productselection.value === 'LooseTea'){
    product2.classList.add('CLASS');
    if(product1.classList.contains('CLASS')){
      product1.classList.remove('CLASS');
    }
  }
});

.CLASS{
  color:red
}

<select id="productselection">
  <option value="PyramidBags">Praymid Bags</option>
  <option value="LooseTea">Loose Tea</option>
</select>

<div id='product1' class="CLASS">
  <p>This text is about the first product</p>
</div>

<div id='product2' class="">
  <p>This text is about the second product</p>
</div>

另外，这可能有助于How to change an element's class with JavaScript?

回应 OP 的评论。

var product1 = document.getElementById("product1");
var product2 = document.getElementById("product2");
var productselection = document.getElementById("productselection");

productselection.addEventListener("change", function(){
    if(productselection.value == 'PyramidBags'){
        if(product1.style.display !== 'block'){
            product1.style.display = 'block';
            product2.style.display = 'none';
        }
    }
    if(productselection.value == 'LooseTea'){
        if(product2.style.display !== 'block'){
            product2.style.display = 'block';
            product1.style.display = 'none';
        }
    }
});

<select id="productselection">
  <option value="PyramidBags">Praymid Bags</option>
  <option value="LooseTea">Loose Tea</option>
</select>

<div id='product1'>
  <p>This text is about the first product</p>
</div>

<div id='product2' style='display:none'>
  <p>This text is about the second product</p>
</div>

此外，使用jQuery 可以让一切变得更轻松。

【讨论】：

非常感谢赛斯！ How could I make this work with option values that have spaces (Pyramid Bags vs PyramidBags) and how could i change it with display none so that by default when option value 1 is selected only div1 is shown (and div2 hidden) and when selecting option值 2 div1 会被隐藏吗？
@AlphaX 如果您不想依赖长匹配文本字符串，请查看我的答案。

【解决方案2】：

将 id 添加到 Div 以便更好地理解

<select id="productselection">
  <option value="Pyramid Bags">Praymid Bags</option>
  <option value="Loose Tea">Loose Tea</option>
</select>

<div id='product1' class="">
 <p>This text is about the first product</p>
</div>

<div id='product2' class="">
 <p>This text is about the second product</p>
</div>

你可以像这样轻松地做，而不是写那么多代码

 $(document).ready(function () {
   $("#product2").hide();
  });

 $("#productselection").change(function() {
    if($('#PyramidBags').val()=='Pyramid Bags')
  { 

     $("#product1 p").css('color', 'red');
  }
   else
  { 
    $("#product2").show();
    $("#product2 p").css('color', 'green');
  }

});

【讨论】：

如果我没看错，是因为它没有显示任何文字？默认情况下，我需要显示第一个 Div。另外，我的代码中有一个错误，选项值实际上是带空格的，所以它是“金字塔袋”和“散茶”。有没有办法仍然使用您的代码？我已经更新了我的 HTML 代码。
@AlphaX..你是说你想默认隐藏第二个 div..让我根据新要求的工作 ti 的建议进行一些更改
@AlphaX，现在它可以在选项值之间使用空格
默认情况下（加载页面时），第一个 div 应该显示，第二个隐藏。在下拉列表中选择第二个值时，应显示第二个 div。就像这里：jsfiddle.net/crustyashish/NeNdR 但我不能使用它，因为我的选项值中有空格。非常感谢您的帮助 Ishwar，非常感谢！
@AlphaX..只是根据建议更改了答案..尝试一下，如果您想要不同的方法，请告诉我

【解决方案3】：

我相信如果您使用单个div 根据所选选项显示文本会更好。将您所有的产品消息按照产品在select元素中的放置顺序存储在一个数组中，并使用selectedIndex()方法获取所选选项的索引，该索引将用于获取相应的文本数组。这样，如果你有一百个产品，你就不需要一百个 DOM 元素来显示产品信息。

const selectElement = document.getElementById('productselection'); 
const divElement = document.getElementById('product'); 
const aboutProducts = ['This text is about product one', 'This text is about product two'];
function changeText() {
  let text = aboutProducts[selectElement.selectedIndex];
  divElement.innerHTML = text;
}

<select id="productselection" onchange="changeText()">
  <option value="PyramidBags">Praymid Bags</option>
  <option value="LooseTea">Loose Tea</option>
</select>

<div class="">
  <p id = 'product'>This text is about product one</p>
</div>

【讨论】：

是的，但这不是他要求的
他说..“我相信”，所以我认为他正在寻找可能的方法。你这样做的方式是一种方式，这是另一种方式。让他选择他想要的。
这会相当复杂，因为 div 本身的文本会重新格式化并包含图像等，但感谢您开箱即用！

【解决方案4】：

document.getElementById("productselection").onchange = (e) => {
    let dataId = e.target.options[e.target.selectedIndex].dataset.id
    
    document.querySelectorAll(".txt").forEach(el => {
        el.style.display = el.dataset.id === dataId ? "block" : "none"
    })
}

.txt{display: none}

<select id="productselection" name="a">
  <option value="PyramidBags" data-id="pr-1">Pyramid Bags</option>
  <option value="LooseTea" data-id="pr-2">Loose Tea</option>
</select>

<div class="txt" data-id="pr-1">
  <p>This text is about the first product</p>
</div>

<div class="txt" data-id="pr-2">
  <p>This textis about the second product</p>
</div>

【讨论】：