here is my html
<div class="test">
<div class="select">
<select name="slct" id="slct">
<option class="default_option" value="A">A</option>
<option value="AAAA">AAAA</option>
<option value="CNAME">CNAME</option>
<option value="MX">MX</option>
<option value="NS">NS</option>
<option value="PTR">PTR</option>
<option value="SOA">SOA</option>
<option value="SRV">SRV</option>
<option value="TXT">TXT</option>
<option value="CAA">CAA</option>
</select>
</div>
</div>
I want to trigger an event when dropdown menu is opened.
so, I have written this jquery,
$('.test').click(function () {
// $(this).parent().toggleClass("active");
console.log('hello');
});
But the problem is, the console is not printed when the dropdown is opened.
the console is printed when the dropdown is closed.
I think you are attaching the event before the DOM is fully loaded
You should attach the event inside $(document).ready(function(){...
OR: Use .on() which ensure that the event will be attached to the element that is added to DOM at a later time.
Also, if you want the code to be executed only when open you should use focus:
$('body').on('focus', '.test', function () {
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('body').on('focus', '.test', function () {
// $(this).parent().toggleClass("active");
console.log('hello');
});
</script>
<div class="test">
<div class="select">
<select name="slct" id="slct">
<option class="default_option" value="A">A</option>
<option value="AAAA">AAAA</option>
<option value="CNAME">CNAME</option>
<option value="MX">MX</option>
<option value="NS">NS</option>
<option value="PTR">PTR</option>
<option value="SOA">SOA</option>
<option value="SRV">SRV</option>
<option value="TXT">TXT</option>
<option value="CAA">CAA</option>
</select>
</div>
</div>
you can use a custom dropdown, not the <select> element
Related
I disabled all the selects in the page with the id that ends with _test (and here all is fine), what I'd like to do is to show a title while the selects are disabled and the mouse is over them.
My problem is that it seems the disabled attribute blocks every event from being executed (I also tried with click instead of mouseover, but the result has not changed). In fact, I tried to comment hide_children_option(); and the function worked.
So the main question is: can I disable the selects, but in the same time trigger events (or at least make what I thought real)?
Below the code-snippet:
function hide_children_option() {
$("[id$=_test]").attr("disabled", "disabled");
}
$(document).ready(function() {
hide_children_option();
$("[id$=_test]").mouseover(function() {
console.log("Hey you!");
var attr = $(this).attr("disabled");
if (typeof attr !== typeof undefined && attr !== false) {
console.log("This is disabled");
}
});
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
Official 1
<select id="obj1_official">
<option value="0">0</option>
<option value="1">1</option>
</select>
<br>
Test 1
<select id="obj1_test">
<option value="0">0</option>
<option value="1">1</option>
</select>
<br>
Official 2
<select id="obj2_official">
<option value="0">0</option>
<option value="1">1</option>
</select>
<br>
Test 2
<select id="obj2_test">
<option value="0">0</option>
<option value="1">1</option>
</select>
<br>
It's not possible to add a mouse event to a disabled input. However there are 2 solutions I can think of you could use.
The most simple one is adding a title="" attribute on the select and this shows a tooltip
If you want your own logic you could create a wrapper around the select and attach events to this wrapper. (take in mind that you need to adjust the styling of this parent to make it appear inline and you need to disable the pointer-events of the disabled select)
Examples:
function hide_children_option() {
$("[id$=_test]").attr("disabled", "disabled");
}
$(document).ready(function() {
hide_children_option();
$(".test-wrapper").mouseover(function() {
console.log('hey!');
});
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
Official 1
<select id="obj1_official">
<option value="0">0</option>
<option value="1">1</option>
</select>
<br>
Test 1
<select id="obj1_test" title="Some text you want to show">
<option value="0">0</option>
<option value="1">1</option>
</select>
<br>
Official 2
<select id="obj2_official">
<option value="0">0</option>
<option value="1">1</option>
</select>
<br>
Test 2
<div class="test-wrapper" style="display:inline;">
<select id="obj2_test" style="pointer-events:none;">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
<br>
I want to create a selection that triggers another selection to select data from the database when the first selection is selected.
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
How to take the data from the database if option 1, 2, or 3 is selected, and the second selection option has a value in it? And if the user changes the option, the second selection index is reset.
Here's the code with Javascript Vanilla:
<body>
<select id="brandSelect" onchange="optionSelected(this.value)">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
</body>
<script>
function optionSelected(value) {
alert(value)
// DO Database Fetch Code Here
}
</script>
And I will tell you there is a good website, we might not need jQuery.
In the bellow Code, by changing the #brandselect you can triger change on the other select. I put specific value. You can add the value you want there.
$(document).on('change', '#brandSelect', function() {
// Here you change the selection of the other Select
$('#graphs').val("20");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="graphs">
<option value="10">AMD</option>
<option value="20">NVidia</option>
</select>
$(document).on('change', '#brandSelect', function() {
// Here you change the selection of the other Select
$('#brandSelect2').val("2");
$('#brandSelect2').trigger("change");
})
$(document).on('change', '#brandSelect2', function() {
// Here you change the selection of the other Select
alert();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="brandSelect2">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
first you need to handle change event and from based on that you can handle second dropdown change event.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="brandSelect2">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
<script>
$(document).on('change', '#brandSelect', function() {
$('#brandSelect2').val("2");
$('#brandSelect2').trigger("change");
})
$(document).on('change', '#brandSelect2', function() {
//here you can use ajax call to fetch data from database.
alert();
})
</script>
I have multiple select2 dropdowns. Whenever the select2 dropdown is open, I want to add class to my div.
For this I am using open and close event of select2. The below code works fine when you open a select2 dropdown and close it. But it does not work if you have a select2 dropdown open and click on another select2 dropdown. In that case it detects close event.
$('select').on('select2:open', function (e) {
$('.a').addClass("header-index");
});
$('select').on('select2:close', function (e) {
$('.a').removeClass("header-index");
});
How do I make sure that when select2 dropdown is open and user tries to open another select2 dropdown then close event is not fired.
Try this way
$(".js-example-events").select2();
$('.js-example-events').on("select2:open", function () { alert(1); });
$('.js-example-events').on("select2:close", function () { alert(2); });
<select class="js-example-events">
<option>Select</option>
<option>Select1</option>
</select>
https://jsfiddle.net/lalji1051/4qucL9h3/7/
Try binding elements with IDs
$('#select1').on('select2:open', function (e) {
$('.a').addClass("header-index");
});
$('#select1').on('select2:close', function (e) {
$('.a').removeClass("header-index");
});
or bind elements with index
$('select')[0].on('select2:open', function (e) {
$('.a').addClass("header-index");
});
$('select')[1].on('select2:close', function (e) {
$('.a').removeClass("header-index");
});
You can use filter() and select2('isOpen')
$('select').select2()
$(document).on('select2:open select2:close', function(e) {
let opened = $('select').filter(function() {
return $(this).select2('isOpen')
}).length
$('.a').toggleClass('header-index', Boolean(opened));
});
.header-index {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
<div class="a">header-index</div>
<select style="width: 300px">
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY">May</option>
<option value="JUN">June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
<select style="width: 300px">
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY">May</option>
<option value="JUN">June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
I have some issues with options, can someone help me ?
I have a button with id="colorButton" but I don't know how to change his color with options.
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
</form>
It can be a javascript answer, jquery... please :(
I have this in script :
$(document).ready(function(){
if ($("#colorSelect").click().val("1"){
$("#testButton").css("color", "red");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
But ofc it don't work :(
Your code contains lots bugs, you just need to bind a change event handler and set color based on selected option.
$(document).ready(function() {
$("#colorSelect").change(function() {
$("#testButton").css("color", $(':selected', this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
</form>
<div id="testButton">button</div>
You need to bind to the change event of the select like:
$(document).ready(function() {
$("#colorSelect").change(function() {
if ($(this).val() == 1) $("#testButton").css("color", "red");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
</form>
<button id="testButton">button</button>
Everyone is focusing on making your code functional. I put the effort to solve your problem in different way.
Each option has data-color attribute. When you change dropdown then selected option's data-color value get picked and changes color. In this way, you don't need multiple if-else.
$(document).ready(function() {
$('#colorSelect').on('change', function(){
var color = $(this).find(':selected').data('color');
$("#testButton").css("color", color);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option data-color='red'>Red</option>
<option data-color='blue'>Blue</option>
<option data-color='green'>Green</option>
</select>
<button id="testButton">button</button>
</form>
I have an HTML list that I want to remove elements from as the user chooses. I've tried using this code from this thread but my issue seems to be accessing the element.
Here's my HTML:
<div id="ShipPlacement">
Ship:
<select name="shipSelec" id="shipSelec">
<option value="aircraftCarrier">Aircraft Carrier</option>
<option value="battleship">Battleship</option>
<option value="cruiser">Cruiser</option>
<option value="destroyer">Destroyer</option>
<option value="destroyer">Destroyer</option>
<option value="submarine">Submarine</option>
<option value="submarine">Submarine</option>
</select>
<button type="button" onclick="placeShip()">Remove Selected Ship</button>
And here's my JavaScript:
$( document ).ready(function() {
var shipList=document.getElementById('shipSelec');
});
function placeShip() {
shipList.remove(shipList.options[shipList.selectedIndex].value;);
shipList.remove(shipList.options[shipList.selectedIndex]);
shipList.remove(shipList.options[selectedIndex]);
shiplist.remove([shipList.selectedIndex])
}
I have several instances of the remove() method but that none of them work.
However, the best way I can convey my error to you is through JSFiddle.
As you've jQuery loaded on the page, use it to bind events and remove element from DOM.
First, bind click event on the button using click. Use the :selected pseudo-selector to select the selected option from the dropdown and remove() to remove it from DOM.
$('button').click(function() {
$('#shipSelec option:selected').remove();
});
$(document).ready(function() {
$('button').click(function() {
$('#shipSelec option:selected').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ShipPlacement">
Ship:
<select name="shipSelec" id="shipSelec">
<option value="aircraftCarrier">Aircraft Carrier</option>
<option value="battleship">Battleship</option>
<option value="cruiser">Cruiser</option>
<option value="destroyer">Destroyer</option>
<option value="destroyer">Destroyer</option>
<option value="submarine">Submarine</option>
<option value="submarine">Submarine</option>
</select>
<button type="button">Remove Selected Ship</button>
</div>
Updated Fiddle
Note that there are several issues in your code
In fiddle "LOAD TYPE" option should be selected to "No Wrap".
jQuery is not included. This can be included using the "Frameworks & Extensions" option in the JavaScript tab
Syntax error in the first statement in the placeShip() near .value;);
shipList is local to the ready callback and hence not accessible from outside of it. Not even in placeShip()
With pure JavaScript
var shipList = document.getElementById('shipSelec');
shipList.options[shipList.selectedIndex].remove();
Fiddle
$("#btn").click(function() {
$("#shipSelec option:disabled").prop("disabled", false)
$("#shipSelec option:selected").prop("disabled", true)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ShipPlacement">
Ship:
<select name="shipSelec" id="shipSelec">
<option value="aircraftCarrier">Aircraft Carrier</option>
<option value="battleship">Battleship</option>
<option value="cruiser">Cruiser</option>
<option value="destroyer">Destroyer</option>
<option value="destroyer">Destroyer</option>
<option value="submarine">Submarine</option>
<option value="submarine">Submarine</option>
</select>
<button type="button" id="btn">Remove Selected Ship</button>
I suggest just disable the option not remove