.html() how to show only selected option of select?

.html() how to show only selected option of select? - javascript

When i do $("#form").html() my output is;
<select id="Select1" name="Select1">
<option value="Data1">Data1</option>
<option value="Data2">Data2</option>
<option value="Data3">Data3</option>
<option selected="selected" value="Data4">Data4</option>
</select>
But when i call .html() function i want to get only selected option of select like this;
<select id="Select1" name="Select1">
<option selected="selected" value="Data4">Data4</option>
</select>
How can i do it with .html() function?

You can get selected option by using selector :selected : https://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/
let selectedOption = $("#form #Select1 option:selected");
let selectedOptionParent = selectedOption.parent()[0];
let selectedOptionTag = selectedOption[0];
let selectedOptionVal = selectedOption.val();
console.log(selectedOptionParent);
console.log(selectedOptionTag);
console.log(selectedOptionVal);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
<select id="Select1" name="Select1">
<option value="Data1">Data1</option>
<option value="Data2">Data2</option>
<option value="Data3">Data3</option>
<option selected="selected" value="Data4">Data4</option>
</select>
</form>

Related

How to get pre selected value in dropdown jquery?

Im populating the dropdown with the selected value like this,
<select id="myselect">
<option value="1">One</option>
<option value="2">Two</option>
<option selected="3">Three</option>
</select>
To access the selected option im using:
var myOption = $('#myselect option:selected').val()
Here myOption returns "Three" as the value. How do i get the value i.e "3" and not the text?

it should be like
<select id="myselect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3" selected >Three</option>
</select>

you write selected=3 its not correct attribute check below code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3" selected>Three</option>
</select>
<script>
var myOption = $('#myselect option:selected').val();
alert(myOption);
</script>

You have to set value="3" and add additional property selected(just the tag as it is boolean in nature)
Try the below html code:
<select id="myselect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3" selected>Three</option>
</select>
$('#myselect option:selected').val() should give you "3"

filter select boxes based on value given with default value of none

I work on this project that user select there "region" and data belong or related to that region will be listed on the next "select box" called "city", I manage to workout the region and the city, it's working with the helped of this community here, and I'm so thankful.
my problem is, if I select specific city, data belong to that city must be on the list of barangay.
one thing before i forget, if the region is empty, the list of city must not display.
in case you need a fiddle
html
<script src="http://code.jquery.com/jquery-git.js"></script>
<p>SELECT YOUR THE REGION
<select type="text" value="" id="region">
<option value="">Please Select Your Region</option>
<option value="CompostelaValey">CompostelaValey</option>
<option value="DavaoOriental">DavaoOriental</option>
</select></p><br><br>
<p>SELECT YOUR THE CITY
<select type="text" name="city" id="city">
<option value="">Please Select City/Municipality</option>
<option value="DavaoOriental" id="Baganga">Baganga</option>
<option value="CompostelaValey" id="Maragusan">Maragusan</option>
<option value="DavaoOriental" id="MatiCity">MatiCity</option>
</select></p><br><br>
<p>SELECT YOUR THE BARANGAY
<select type="text" id="brgy">
<option value="">Barangay</option>
<option value="Baganga">Baculin</option>
<option value="Baganga">Batawan</option>
<option value="Baganga">Batiano</option>
<option value="Baganga">Binondo</option>
<option value="Baganga">Bobonao</option>
<option value="Baganga">Campawan</option>
<option value="Baganga">Central</option>
<option value="Baganga">Dapnan</option>
<option value="Baganga">Kinablangan</option>
<option value="Baganga">Lambajon</option>
<option value="Baganga">Lucod</option>
<option value="Baganga">Mahan-ub</option>
<option value="Baganga">Mikit</option>
<option value="MatiCity">Central</option>
<option value="MatiCity">Badas</option>
<option value="MatiCity">Matiao</option>
<option value="Maragusan">kalapagan</option>
</select></p><br><br>
script
$(document).ready(function() {
$("#region").change(function(){
var val=$(this).val();
$("#city option").hide();
$("#city").val("");
$("#city option[value='"+val+"']").show();
$("#city").change();
});

I've used the same hiding logic and used the id as value to filter the options:
$(document).ready(function() {
$("#city").change(function() {
var val = $(this).find(":selected").prop("id");
$("#brgy option").hide();
$("#brgy").val("");
$("#brgy option[value='" + val + "']").show();
});
$("#region").change(function() {
var val = $(this).val();
$("#city option").hide();
$("#city").val("");
$("#city option[value='" + val + "']").show();
$("#city").change();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>SELECT YOUR THE REGION
<select type="text" value="" id="region">
<option value="">Please Select Your Region</option>
<option value="CompostelaValey">CompostelaValey</option>
<option value="DavaoOriental">DavaoOriental</option>
</select>
</p><br><br>
<p>SELECT YOUR THE CITY
<select type="text" name="city" id="city">
<option value="">Please Select City/Municipality</option>
<option value="DavaoOriental" id="Baganga">Baganga</option>
<option value="CompostelaValey" id="Maragusan">Maragusan</option>
<option value="DavaoOriental" id="MatiCity">MatiCity</option>
</select>
</p><br><br>
<p>SELECT YOUR THE BARANGAY
<select type="text" id="brgy">
<option value="">Please Select Your Barangay</option>
<option value="Baganga">Baculin</option>
<option value="Baganga">Batawan</option>
<option value="Baganga">Batiano</option>
<option value="Baganga">Binondo</option>
<option value="Baganga">Bobonao</option>
<option value="Baganga">Campawan</option>
<option value="Baganga">Central</option>
<option value="Baganga">Dapnan</option>
<option value="Baganga">Kinablangan</option>
<option value="Baganga">Lambajon</option>
<option value="Baganga">Lucod</option>
<option value="Baganga">Mahan-ub</option>
<option value="Baganga">Mikit</option>
<option value="MatiCity">Central</option>
<option value="MatiCity">Badas</option>
<option value="MatiCity">Matiao</option>
<option value="Maragusan">kalapagan</option>
</select>
</p><br><br>

Ignore 1st option from multiple select box-jquery

I have multiple select box with same options which are mutually exclusive .For example if select box A and select box B has option1 ,option2 and option 3 , Then if I select option1 for select box A, then it should not be available on select box B
My demonstration
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
$('.alert_type').change(function() {
var selected_value=$(this).val();
$(".alert_type option[value='" + selected_value + "']").not(this.selectedOptions[0]).hide();
});
But I want to make 1st option as exception i.e <option value="">Select below</option> as I need flexibility to revert all the option
You can see on fiddle below , if I select option1 from select box 1 ,"select below" from option 3 is also removed which I want to put in exception
Fiddle
https://jsfiddle.net/timus2001/rbuyk7na/3/
When I try with
$(".alert_type option").show();
to show all at first it is not mutually exclusive any more (see the picture)

Ok. let me see if I get you this time:
$('.alert_type').change(function() {
var selected_values = [],
iteration;
$(".alert_type option").show();
$(".alert_type").each(function(){
iteration = $(this).find('option:selected').val();
if ( iteration !== "" ) {
selected_values.push( iteration );
}
})
for ( var i = 0; i < selected_values.length; i++ ) {
$(".alert_type option[value='"+ selected_values[i] +"']").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="select" class="alert_type">
<option selected>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>

This is what you need:
$('select.alert_type').on('change keyup',function() {
var val = $(this).val();
$('select.alert_type option').prop('disabled',false);
$(this).siblings().find('option[value='+val+']').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
Good luck :D

Auto change second dropdown when selecting the first option

I have two dropdowns, Selecting the first one should change the second automatically. Both dropdowns are visible always.
I have created a fiddle to get you started. Can you help me out. Thanks!
HTML Fiddle
<select name="" id="">
<option value="">-</option>
<option value="">Apple</option>
<option value="">Orange</option>
<option value="">Cucumber</option> <!-- veg -->
<option value="">Banana</option>
<option value="">Grapes</option>
<option value="">Onion</option> <!-- veg -->
<option value="">Tomato</option> <!-- veg -->
</select>
<select name="" id="">
<option value="">-</option>
<option value="">Fruit</option>
<option value="">Vegetable</option>
</select>

Use data-* attribute to differentiate among fruit and vegetable
var category = document.getElementById('category');
document.getElementById('elements').onchange = function() {
var optionSelected = this.options[this.selectedIndex];
if (optionSelected.textContent != '-') {
if (optionSelected.dataset.val === 'veg') {
category.value = 'veg';
} else {
category.value = 'fruit';
}
} else {
category.value = '';
}
}
<select name="" id="elements">
<option value="">-</option>
<option value="">Apple</option>
<option value="">Orange</option>
<option data-val='veg' value="">Cucumber</option>
<!-- veg -->
<option value="">Banana</option>
<option value="">Grapes</option>
<option data-val='veg' value="">Onion</option>
<!-- veg -->
<option data-val='veg' value="">Tomato</option>
<!-- veg -->
</select>
<select name="" id="category">
<option value="">-</option>
<option value="fruit">Fruit</option>
<option value="veg">Vegetable</option>
</select>

If you are using jQuery it is simpler.
This is your jQuery code.
$('#item').on('change',function(){
$('#category').val($(this) .find("option:selected").attr('data-category'));
});
This is the modified HTML
<select name="" id="item">
<option value="">-</option>
<option data-category ="fruit" value="">Apple</option>
<option data-category ="fruit" value="">Orange</option>
<option data-category ="vegetable">Cucumber</option>
<option data-category ="fruit" value="">Banana</option>
<option data-category ="fruit" value="">Grapes</option>
<option data-category ="vegetable">Onion</option>
</select>
<select name="" id="category">
<option value="">-</option>
<option value="fruit">Fruit</option>
<option value="vegetable">Vegetables</option>
</select>

Jquery sync multiple dropdown list

I've multiple dropdown lists and try to use jquery to sync available options in all dropdown list...
<select class="abc" id="test1">
<option value="" selected></option>
<option value="1">RTY</option>
<option value="2">QWE</option>
<option value="3">ASD</option>
<option value="4">ZXC</option>
<option value="5">BNM</option>
</select>
<select class="abc" id="test2">
<option value="" selected></option>
<option value="1">RTY</option>
<option value="2">QWE</option>
<option value="3">ASD</option>
<option value="4">ZXC</option>
<option value="5">BNM</option>
</select>
<select class="abc" id="test3">
<option value="" selected></option>
<option value="1">RTY</option>
<option value="2">QWE</option>
<option value="3">ASD</option>
<option value="4">ZXC</option>
<option value="5">BNM</option>
</select>
If I select one item from one of the dropdown list, the selected option will be hide from others dropdownlist
<select class="abc" id="test1">
<option value="1" selected>RTY</option>
<option value=""></option>
<option value="2">QWE</option>
<option value="3">ASD</option>
<option value="4">ZXC</option>
<option value="5">BNM</option>
</select>
<select class="abc" id="test2">
<option value=""></option>
<option value="2">QWE</option>
<option value="3">ASD</option>
<option value="4">ZXC</option>
<option value="5">BNM</option>
</select>
<select class="abc" id="test3">
<option value=""></option>
<option value="2">QWE</option>
<option value="3">ASD</option>
<option value="4">ZXC</option>
<option value="5">BNM</option>
</select>
If I un-select it or select another item, the previous selected item will be show again in all dropdown list
RTY
QWE
ASD
ZXC
BNM
RTY
QWE
ASD
ZXC
BNM
RTY
QWE
ASD
ZXC
BNM
Below is my jquery code, managed to hide selected item from all dropdown lists, but not able to un-hide selected item.
$('.abc').change(function(){
$('.abc').each(function(){
if($('.abc').val() != '') {
$('option[value="'+$(this).val()+'"]').hide();
} else {
$('option[value!="'+$(this).val()+'"]').not(this).show();
}
});
});
What is wrong in my code?

You can store your current selected values in array and then just hide every of them like:
var vals = new Array();
$('.abc').change(function() {
vals = [];
$('.abc').each(function(){
var val = $(this).val();
if (val != ""){
vals.push(val);
}
$('option').show();
for (var i = 0; i< vals.length; i++){
$('option[value="' + vals[i] + '"]').hide();
}
});
});
Fiddle

What about something like this:
var $abs = $('.abc').change(function() {
$abs.children().show()
.end().not(this)
.find('[value="' + $(this).val() + '"]').hide();
});
Demo: http://jsfiddle.net/vw9z8bk1/1/

We Keep Coding

JavaScript is the programming language of the Web.

.html() how to show only selected option of select? - javascript

Related

How to get pre selected value in dropdown jquery?

filter select boxes based on value given with default value of none

Ignore 1st option from multiple select box-jquery

Auto change second dropdown when selecting the first option

Jquery sync multiple dropdown list

Categories

Resources