Call a JavaScript function using <select> name - javascript

I have a grid in asp.net. In this grid I am adding paging. In the paging footer I am showing a dropdown dynamically. The drop down contains the values (10,25,50,100). Now I want to capture the dropdown value and according to that value I want to do some change page styles. But here I am not getting any id of the dropdown list.
Here is my select code
<select style="text-align:right;" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$dgBatting$ctl13$ctl26\',\'\')', 0)" name="ctl00$ContentPlaceHolder1$dgBatting$ctl13$ctl26">
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>

Html:
<select id="ftselect">
<option value="MostRecent">MostRecent</option>
<option value="MostLiked">MostLiked</option>
<option value="Relavance">Relavance</option>
<option value="MostViewed">MostViewed</option> </select>
Jquery:
$("select").change(function () {
$("select option:selected").each(function () {
str = $(this).text();
});
})
.change();

Related

how to remove attribute selected option inside modal

I have problem in removing the attribute selected in the option
my select is inside the modal when my page load option build dynamically like this
<select class="form-control" id="petselect" name="petselect">
<?php
foreach ($pest as $pet){
echo "<option value='".$pet->id."'>$pet->name</option>";
}
?>
</select>
when I edit the form the modal will show and I selected the default pet->id
<select class="form-control" id="petselect" name="petselect">
<option value="1">pet1</option>
<option value="2" selected="selected">pet2</option>
<option value="3">pet3</option>
<option value="4">pet4</option>
<option value="5">pet5</option>
<option value="6">pet6</option>
<option value="7">pet7</option>
<option value="8">pet8</option>
<option value="9">pet9</option>
</select>
Now when I change it to pet5 and submit the form via ajax, and my modal will hide,
when I edit again the option selected pet5 is displayed but when I view source
this is how it looks like, 2 selected attribute.
<select class="form-control" id="petselect" name="petselect">
<option value="1">pet1</option>
<option value="2" selected="selected">pet2</option>
<option value="3">pet3</option>
<option value="4">pet4</option>
<option value="5" selected="selected">pet5</option>
<option value="6">pet6</option>
<option value="7">pet7</option>
<option value="8">pet8</option>
<option value="9">pet9</option>
</select>
this is my js to add selected attribute,when I edit the form
$('#petselect option')
.filter(function() { return $(this).val() === petID; })
.attr('selected',true);
and code for my modal when it hides.
$('#petselectmodal').on('hidden.bs.modal', function () {
$('#petselect option:selected')
.removeAttr('selected');
});
This should not be done on the <option> but on the <select> level. The Options are basically a visual indicators. The element that has the Name and thus the Value is the Select element. Use $('#petselect").val(5); and then the form will read this value instead. Plus HTML will update the Option too.
$(function() {
$("button").click(function() {
$("#petselect").val(5);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="petselect" name="petselect">
<option value="1">pet1</option>
<option value="2" selected="selected">pet2</option>
<option value="3">pet3</option>
<option value="4">pet4</option>
<option value="5">pet5</option>
<option value="6">pet6</option>
<option value="7">pet7</option>
<option value="8">pet8</option>
<option value="9">pet9</option>
</select>
<button>Change</button>
You can do it manually if you so choose.
$(function() {
$("button").click(function() {
$("#petselect").val("");
$("#petselect option").prop("selected", false);
$("#petselect").val(5);
$("#petselect option[value='" + 5 + "']").prop("selected", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="petselect" name="petselect">
<option value="1">pet1</option>
<option value="2" selected="selected">pet2</option>
<option value="3">pet3</option>
<option value="4">pet4</option>
<option value="5">pet5</option>
<option value="6">pet6</option>
<option value="7">pet7</option>
<option value="8">pet8</option>
<option value="9">pet9</option>
</select>
<button>Change</button>

Javascript add new select index with data from database

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>

Jquery change multiple select buttons with a select button

I want to change multiple select buttons's values with another select button.
Practically when someone select an option in the main select button, the other select buttons must change with that value.
EDIT: I added the code, the first is the main select button and after I select somethig there, it should change in the others.
<select class="select_format">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
Thanks.
Since you didn't supply code here's a guess:
$(".myTriggerButton").on("click", function() {
$(".buttonToChangeValue").each(function() {
this.value = "new value";
});
});
$('.select_format').change(function(){
$('.format_imgs').val( $(this).val() );
});
https://jsfiddle.net/7hno0ob8/1/

Disable <select> option when selected in another <select> box

I've got a group of 16 select boxes in a php mail() form, and I want to disable an option if it's chosen in any other box.
The order of options in the select boxes aren't the same, and the I need the value for the php mail.
I want the user filling in the form to not be able to choose the same option twice or more.
<select name="box1" id="box1">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<select name="box2" id="box2">
<option value="Two">Two</option>
<option value="One">One</option>
<option value="Three">Three</option>
<option value="Life">Life</option>
</select>
<select name="box3" id="box3">
<option value="Life">Life</option>
<option value="One">One</option>
<option value="Two">Two</option>
</select>
Also, further down the website, I want to do the same with another group of 8 select boxes - and they contain some of the same options, but then I want them all to be choosable from the beginning, until an option from one of them get picked.
I know too little about jQuery and JavaScript. Help?
Use .filter to get option-elements having value similar as current value.
$('select').on('change', function() {
$('option').prop('disabled', false); //reset all the disabled options on every change event
$('select').each(function() { //loop through all the select elements
var val = this.value;
$('select').not(this).find('option').filter(function() { //filter option elements having value as selected option
return this.value === val;
}).prop('disabled', true); //disable those option elements
});
}).change(); //trihgger change handler initially!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select name="box1" id="box1">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<select name="box2" id="box2">
<option value="Two">Two</option>
<option value="One">One</option>
<option value="Three">Three</option>
<option value="Life">Life</option>
</select>
<select name="box3" id="box3">
<option value="Life">Life</option>
<option value="One">One</option>
<option value="Two">Two</option>
</select>
Fiddle Demo
Thanks, Rayon.
I finally got it to work flawlessly with this piece of code:
<script type="text/javascript">
$('select[name*="box1"]').change(function(){
$('select[name*="box1"] option').attr('disabled',false);
$('select[name*="box1"]').each(function(){
var $this = $(this);
$('select[name*="box1"]').not($this).find('option').each(function(){
if($(this).attr('value') == $this.val())
$(this).attr('disabled',true);
});
});
});
</script>

Display selected value in dropdown menu

I have a drop down list like this:
<select id="ddlLanguage" name="culture">
<option value="null" >Language:</option>
<option value="ar-jo">Arabic</option>
<option value="en-us">English</option>
<option value="fr-FR">French</option>
<option value="es-cl">Spanish</option>
</select>
If I select "Arabic",the drop down list should display "Arabic". But am always getting "Language".
EDIT
I got the answer by using Viewbag
Script:-
<script type="text/javascript">
$(function () {
$('#ddlLanguage').val("#ViewBag.Msg");
$('#ddlLanguage').change(function () {
$('#currentCulture').val($(this).val());
$(this).parents("form").submit();
});
});
</script>
In the controller i have set value of ViewBag.Msg.
ViewBag.Msg = ddlLanguage
Try with this code
$('#ddlLanguage').change(function(){
alert( $(this).find('option:selected').text());
});
Update your dropdown with code given below:
<select id="ddlLanguage" name="culture">
<option value="null" >Language:</option>
<option value="Arabic">Arabic</option>
<option value="English">English</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
</select>
Set the selected attribute to selected on the given option.
$("your option").attr("selected", "selected");

Categories