We Keep Coding

Jquery - highlight selected from select option based from the returned ajax value [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I have an ajax that return values from an another page, I want to target a value that matches from the value ajax returns and select it on the tag.
Here's my code so far:
success: function(data) {
$("select[name='account_type']").val(data.account_type).prop('selected', true);
},
I want to target this:
<select class="form-control">
<option value="0">DEBIT</option>
<option value="1">CREDIT</option>
</select>
So if the ajax call returns value of 1, then CREDIT should be :selected

For ajax:
success: function(data) {
$("select[name='account_type']").val(data.account_type).prop('selected', true);
},
For HTML
<select name="account_type" class="form-control">
<option value="0">DEBIT</option>
<option value="1">CREDIT</option>
</select>

Set name of select element as you are using it
<select name="account_type" class="form-control">
and .prop() is not required so just remove it.
$("select[name='account_type']").val(1)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="account_type" class="form-control">
<option value="0">DEBIT</option>
<option value="1">CREDIT</option>
</select>

prop is not needed:
success: function(data) {
$("select[name='account_type']").val(data.account_type);
},
then give name else use $("select.form-control")
<select name=account_type class="form-control">
<option value="0">DEBIT</option>
<option value="1">CREDIT</option>
</select>

Your HTML :
<select class="form-control" name="account_type">
<option value="0">DEBIT</option>
<option value="1">CREDIT</option>
Your ajax response function :
success: function(data) {
$('select[name="account_type"]').find('option[value=data.account_type]').attr("selected",true);
},

html javascript jquery select click the option and load [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I want to load the option value in div>. The below code can be run successfully.
<select onchange="location.assign = this.options[this.selectedIndex].value;">
<option>Please select</option>
<option value="page1.html">page1</option>
<option value="page2.html">page2</option>
<option value="page3.html">page3</option>
</select>​
<div id="load_page"></div>
How can I load the page inside div
thanks.

With jQuery you can use $.load():
$(function() {
var page = $('#load_page');
$('#pages').on('change', function(e) {
var option = $(this).find('option:selected');
if (0 === option.index()) {
page.text('Oops');
} else {
page.text('Loading ' + option.val());
page.load(option.val());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="pages">
<option>Please select</option>
<option value="page1.html">page1</option>
<option value="page2.html">page2</option>
<option value="page3.html">page3</option>
</select>
<div id="load_page"></div>
With just iframe and js:
document.getElementById('pages').onchange = function(e) {
document.getElementById('load_page').src = this.options[this.selectedIndex].value;
};
<select id="pages">
<option value="">Please select</option>
<option value="page1.html">page1</option>
<option value="page2.html">page2</option>
<option value="page3.html">page3</option>
</select>
<iframe id="load_page"></iframe>

You can use load() method of jquery. The load() method loads data from a server and puts the returned data into the selected element.
$(document).ready( function() {
$("select").on("change", function() {
if($("select option:selected").index() > 0) {
console.log("cannot load");
} else {
$("#load_page").load($('option').val());
}
});
});

How to perform click for a drop down in angular2 [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I have the following drop down and I am unable to perform click on select of one of the option.
<select >
<option value="volvo">Volvo</option>
<option value="saab" (click)="get()">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
get() {
alert('hi');
}

You can use (change) event .
<select (change)="onchange(event)">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
onchange(event) {
if(event.target.value=="saab")
{
//perform your action
}
}

You should have the change for the select , not for the option,
<select [(ngModel)] = "selected" (change)="onchange(event)">
<option value="volvo">Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
DEMO

if statement not executed in javascript [always else] [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
pls can any one help.it always return else..what i want is, when select 1st dropdown,the second dropdown hide and Vice Versa
html
<form id="myform" onchange="check();" >
<select id="myselecta" >
<option value="a1">a1</option>
<option value="a2">a2</option>
</select>
<select id="myselectb" >
<option value="b1">b1</option>
<option value="b2">b</option>
</select>
java script
function check() {
var dropdown = document.getElementById('myform').value;
if (dropdown == 'myselecta') {
document.getElementById('myselectb').style.display = 'none';
}
else {
document.getElementById('myselecta').style.display = 'none';
}
}

Do you want to accomplish something like this?
HTML
<select id="switch" onchange="check();">
<option value="myselecta">myselecta</option>
<option value="myselectb">myselectb</option>
</select>
<select id="myselecta">
<option value="a1">a1</option>
<option value="a2">a2</option>
</select>
<select id="myselectb">
<option value="b1">b1</option>
<option value="b2">b</option>
</select>
JS
function check() {
var dropdown = document.getElementById('switch').value;
if (dropdown === 'myselecta') {
document.getElementById('myselecta').style.display = 'block';
document.getElementById('myselectb').style.display = 'none';
} else {
document.getElementById('myselecta').style.display = 'none';
document.getElementById('myselectb').style.display = 'block';
}
}
Edit
html
<select id="myselecta" onclick="check()">
<option value="a1">a1</option>
<option value="a2">a2</option>
</select>
<select id="myselectb" onclick="check()">
<option value="b1">b1</option>
<option value="b2">b</option>
</select>
javascript
function check() {
if (this.id === 'myselecta') {
document.getElementById('myselectb').style.display = 'none';
} else {
document.getElementById('myselecta').style.display = 'none';
}
}

Try changing
var dropdown=document.getElementById('myform').value;
to
var dropdown=document.getElementById('myform').getAttribute('id');

As far as I know, onchange event doesn't capture individual select's onchange events. You should better add an onchange to each individual select element and pass a parameter to the function, like the element's ID to differentiate which element fired the event.

I do have one dynamic dropdownlist and textbox addition [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have a DropDownList and Textbox on my page.
The DropDownList bringing data from database dynamically.
I want that when I choose any item from dropdownlist, it should appear inside the textbox immediately.
How to do it???

here is a solution... by using javascript
<select id="select" onchange="return getValue();">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>
<input type="text" name="textbox" id="textbox">
<script type="text/javascript">
function getValue()
{
var e = document.getElementById("select");
var str = e.options[e.selectedIndex].value;
document.getElementById("textbox").value = str;
}
</script>

The Jquery way
HTML CODE:
<select id="select" name="ddlb">
<option value="1" selected='selected'>option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
<input type="text" name="textbox" id="txt">
JQUERY CODE:
$('#select').on('change', function () {
$('#txt').val($('#select option:selected').val());
});
$('#txt').val($('#select option:selected').val());
LIVE DEMO:
http://jsfiddle.net/PfBFS/2/
Happy Coding :)