[英]How to add a bottom margin to the div on select the option with JavaScript
我正在尝试在选择值时添加 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>
如果您有一个元素要根据 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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.