如何在 select 上的 div 中添加底部邊距 JavaScript 選項

Question

我正在嘗試在選擇值時添加 select div 的邊距

這是我的代碼

<style>
.container{
border:2px solid black;
margin-top: 20px;}

</style>
<div class="html-code-output">
<div class="main">
    <p>Select an option to show the value and text of that option.</p>
    <select class="addon-select">
        <option value="">Select  a Option</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
<div class="container">
<h4>Add a margin when we select the an option</h4>
</div>
</div>
</div>

<script>

jQuery('.addon-select').on('change', function () {
    let val = $(this).val();
    $(".main").css("margin-bottom", "1rem");
    $(".main('" + val + "') ").css("margin-bottom", "5rem");
});;

</script>

Answer 1

如果您有一個元素要根據 select 上選擇的內容更改其底部邊距：

HTML

<body>

<div class="item">
  Item 
</div>

<select onchange="selectFunction(this)">
  <option value="">Select option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
</body>

JS

function selectFunction(selected){
    var selectedOption = $(selected).val();
  
  $(".item").css("margin-bottom",selectedOption*3);
}

如果您有很多項目，並且您想根據 select 上選擇的選項更改其中一個的填充：

HTML

<body>

<div class="item">
  Item  1
</div>
<div class="item">
  Item  2
</div>
<div class="item">
  Item  3
</div>
<div class="item">
  Item  4
</div>

<select onchange="selectFunction(this)">
  <option value="">Select option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
</body>

JS

function selectFunction(selected){
$(".item").css("margin-bottom",0);
    var selectedOption = $(selected).val();
  selectedOption --;
  
  
  
  $(".item").eq(selectedOption).css("margin-bottom",10);
}

如何在 select 上的 div 中添加底部邊距 JavaScript 選項

問題描述

1 個解決方案

解決方案1
0 2022-09-15 22:27:07

如何在 select 上的 div 中添加底部邊距 JavaScript 選項

問題描述

1 個解決方案

解決方案1 0 2022-09-15 22:27:07

解決方案1
0 2022-09-15 22:27:07