Javascript 根据选择选项中的值更改Div类_Javascript_Jquery_Css

Javascript 根据选择选项中的值更改Div类

javascript jquery css

Javascript 根据选择选项中的值更改Div类,javascript,jquery,css,Javascript,Jquery,Css,我有一个带有选项的选择下拉列表，我想根据下拉列表中的选择显示某个div 从技术上讲，我认为最简单的方法是设置不应该只是为了显示而可见的div：通过应用正确的css类来设置none 但是，我不知道如何创建相应的JS/jQuery代码。在过去的半个多小时里，我在这里研究了其他解决方案，但它们对于他们的问题来说更为独特，而我相信我的解决方案可能非常简单谁能帮帮我吗非常感谢最好的，大卫 $document.readyfunction{ $tea.hide； $‘金字塔袋’。展示； $'Prod

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

从技术上讲，我认为最简单的方法是设置不应该只是为了显示而可见的div：通过应用正确的css类来设置none

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

谁能帮帮我吗

非常感谢

最好的，大卫

$document.readyfunction{ $tea.hide； $‘金字塔袋’。展示； $'ProductSelect-product-template-option-0'.changefunction{ 如果$ProductSelect-product-template-option-0.val==散装茶 { $tea.show； $1.隐藏； } 其他的 { $1.show； $tea.hide； } } }; 胶袋散茶本文是关于第一个产品的

这篇文章是关于第二种产品的

给你

var product1=document.getElementByIdproduct1； var product2=document.getElementByIdproduct2； var productselection=document.getElementByIdproductselection； productselection.addEventListenerchange，函数{ ifproductselection.value===“金字塔包”{ product1.classList.add'CLASS'； ifproduct2.classList.contains'CLASS'{ product2.classList.删除'CLASS'； } } ifproductselection.value=='LooseTea'{ product2.classList.add'CLASS'； ifproduct1.classList.contains'CLASS'{ product1.classList.删除'CLASS'； } } }; .类{ 颜色：红色 } 胶袋散茶本文是关于第一个产品的

本文是关于第二个产品的

给你

本文是关于第二个产品的

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

const selectElement=document.getElementById'productselection'； const divElement=document.getElementById'product'； const aboutProducts=['此文本是关于产品一'，'此文本是关于产品二']；函数changeText{ 让text=aboutProducts[selectElement.selectedIndex]； divElement.innerHTML=文本； } 胶袋散茶

本文是关于产品一的

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

将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.getElementByIdproductselection.onchange=e=>{ 让dataId=e.target.options[e.target.selectedIndex].dataset.id document.querySelectorAll.txt.forEachel=>{ el.style.display=el.dataset.id==dataId？块：无 } } .txt{显示：无} 金字塔形袋子散茶本文是关于第一个产品的

这篇文章是关于第二种产品的

请从本页中查看已接受的答案。事实证明了这一点。希望有帮助。谢谢你，迈克，看起来不错！我要试试看！我喜欢这个代码，但是如果我的选项值中有空格，有没有办法使用它？它似乎总是打破编码检查出公认的答案，从这个。事实证明了这一点。希望有帮助。谢谢你，迈克，看起来不错！我要试试看！我喜欢这个代码，但是如果我的选项值中有空格，有没有办法使用它？这似乎总是违反规则是的，但那不是他要的他说。。我相信，所以我想他正在寻找可能的方法。你这样做是一种方式，这是另一种方式。让他选择他想要的。这将是相当复杂的，因为div中的文本本身将被重新格式化，并包括图像等。但感谢您开箱思考！！是的，但那不是他要的他说了。。我相信，所以我想他正在寻找可能的方法。你这样做是一种方式，这是另一种方式。让他选择他想要的。这将是相当复杂的，因为div中的文本本身将被重新格式化，并包括图像等。但感谢您开箱思考！！如果我没看错的话，结果是它没有显示任何文本？默认情况下，我需要显示第一个Div。另外，我的代码中有一个错误，选项值实际上是带有空格的，所以是金字塔形袋子和散装茶。有没有办法继续使用你的代码？我已经更新了我的HTML代码。@AlphaX..你是说你想在默认情况下隐藏第二个div..并让我根据建议进行一些更改，以便按照新的命令使用tirequirement@AlphaX，现在它将使用选项值之间的空格。默认情况下，加载页面时，应显示第一个div，隐藏第二个div。在下拉菜单中选择第二个值时，应显示第二个div。就像这里：但是我不能使用它，因为我的选项值中有空格。非常感谢您对Ishwar的帮助，非常感谢@AlphaX..只是根据建议更改了答案..试试看，如果你想要不同的答案，请告诉我如果我看得对，结果是它没有显示任何文本？默认情况下，我需要显示第一个Div。另外，我的代码中有一个错误，选项值实际上是带有空格的，所以是金字塔形袋子和散装茶。有没有办法继续使用你的代码？我已经更新了我的HTML代码。@AlphaX..你是说你想在默认情况下隐藏第二个div..并让我根据建议进行一些更改，以便按照新的命令使用tirequirement@AlphaX，现在它将使用选项值之间的空格。默认情况下，加载页面时，应显示第一个div，隐藏第二个div。在下拉菜单中选择第二个值时，应显示第二个div。就像这里：但是我不能使用它，因为我的选项值中有空格。非常感谢您对Ishwar的帮助，非常感谢@AlphaX..只是根据建议更改了答案..试试看，如果你想要不同的答案，请告诉我非常感谢Seth！我如何才能使用带有空格的选项值“金字塔包”与“金字塔包”，以及如何使用“无显示”进行更改，以便在默认情况下，当选择选项值1时，只显示div1，隐藏div2，然后在选择选项值2时，隐藏div1？@AlphaX如果不想依赖长匹配文本，请参阅我的答案谢谢你，赛斯！我如何才能使用带有空格的选项值“金字塔包”与“金字塔包”，以及如何使用“无显示”进行更改，以便在默认情况下，当选择选项值1时，只显示div1，隐藏div2，然后在选择选项值2时，隐藏div1？@AlphaX如果不想依赖长匹配文本，请参阅我的答案串。