私はselect2で選択した値を取得するボタンを持っていますが、クライアントがまだ選択2のオプションの1つを選択していない場合はそのボタンを非表示にする必要があります。 どうすればよいですか？この値select2がnullであることを確認してください
if ($('.deggre[select]').val() = ''){
$('dropdownMenu1').css({"display": "none"});
}
しかし、このコードのような
私のスクリプト、ボタンはまだでも、私はあなたたちが間違っているものを教えてselect2.canで何も選択しなかった、現れますか？
HERESに私のjsfiddle https://jsfiddle.net/f4mfkh6t/1/
このヘルプあなた：
<html>
<head>
</head>
<body>
<select class="deggre" style="width: 100%">
<option value=""></option>
<option value="Alabama">Alabama</option>
<option value="Wyoming">Wyoming</option>
</select>
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" style="display:none">
<!-- the name of button is the value of what we choose in first select2 -->Alabama
<span class="glyphicon glyphicon-remove"></span>
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".deggre").change(function(){
if($(this).val() == "")
$('#dropdownMenu1').css({"display": "none"});
else
$('#dropdownMenu1').css({"display": "block"});
})
})
</script>
</body>
</html>最終的なコード：
<html>
<head>
<style>
buttonResultarea button span{
margin-left:5px
}
</style>
</head>
<body>
<div class="selectContainer container">
<!-- when client choose the dropdown, the value of choosen go to buttonResultarea -->
<div class="row">
<div class="col-xs-6">
<select class="deggre" style="width: 20%">
<option value=""></option>
<option value="Alabama">Alabama</option>
<option value="Wyoming">Wyoming</option>
</select>
</div>
<div class="col-xs-6">
<select class="position" style="width: 20%">
<option value=""></option>
<option value="lorem">lorem</option>
<option value="ipsum">ipsum</option>
</select>
</div>
</div>
</div>
<div class="buttonResultarea container">
<div class="row">
<div class="col-xs-6">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" style="display:none">
<!-- the name of button is the value of what we choose in first select2 -->Alabama
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<div class="col-xs-6">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" style="display:none">
<!-- the name of button is the value of what we choose in second select2 -->ipsum
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".deggre").change(function(){
if($(this).val() == "")
$('#dropdownMenu1').css({"display": "none"});
else
$('#dropdownMenu1').css({"display": "block"});
})
$(".position").change(function(){
if($(this).val() == "")
$('#dropdownMenu2').css({"display": "none"});
else
$('#dropdownMenu2').css({"display": "block"});
})
})
</script>
</body>
</html>さん、私はそれを試みますが、私はselect2を選択すると私のボタンはまだそこにあります。 https://jsfiddle.net/f4mfkh6t/3/ –
@adiradian私は自分の答えを更新しています。 – Ehsan
https://jsfiddle.net/f4mfkh6t/5/それは作業をしなかった –
更新フィドル：https://jsfiddle.net/f4mfkh6t/6/
あなたは、両方の場所のページのロードにとchnageにSELECT2の値をチェックする必要があります。
$(document).ready(function() {
if ($('.deggre').val() == ""){
$('#dropdownMenu1').css({"display": "none"});
}
if ($('.position').val() == ""){
$('#dropdownMenu2').css({"display": "none"});
}
$('.deggre').on('change', function() {
if ($('.deggre').val() != ""){
$('#dropdownMenu1').css({"display": "block"});
}
});
$('.position').on('change', function() {
if ($('.position').val() != ""){
$('#dropdownMenu2').css({"display": "block"});
}
});
});
'='の代わりに '==='を使用します。 – gcampbell