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 3 years ago.
Improve this question
hi i wants to apply a condition that if edit button is clicked then it show or hide another portion, i have applied the condition to do it but its not working:
$(document).ready(function() {
$("#edit-invited-btn").click(function() {
$(".edit-invited2").toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4" id="edit-invited2">
<select id="subjects" name="subjects" class="form-control select2" data-placeholder="Select Teacher" style="width: 100%;" multiple>
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
</div>
<button class="pull-right" id="edit-invited-btn">Edit</button>
$(".edit-invited2") should be $("#edit-invited2"). In html, edit-invited2 is an id and not class.
$("#edit-invited-btn").click(function() {
$("#edit-invited2").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4" id="edit-invited2">
<select id="subjects" name="subjects" class="form-control select2" data-placeholder="Select Teacher" style="width: 100%;" multiple>
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
</div>
<button class="pull-right" id="edit-invited-btn">Edit</button>
$(".edit-invited").toggle();
There is no class named edit-invited in your code check once
If you want to toggle id="edit-invited" than replace
$(".edit-invited").toggle();
To
$("#edit-invited").toggle();
Related
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 3 years ago.
Improve this question
Code:
<select id="avoid_id">
<option value="All">All</option>
</select>
<select>
<option value="All">All</option>
</select>
<select>
<option value="All">All</option>
</select>
<select>
<option value="All">All</option>
</select>
jQuery:
$('select :not(avoid_id)').change(some_function); // not working
I want to execute same function on all <select> tag change except with id avoid_id.
How to achieve this?
You need to use $('select:not(#avoid_id)') as :not is a css selector and it comes together with the element so use select:not and the parameter for :not() is the id value so use #avoid_id inside that:
$('select:not(#avoid_id)').change(some_function);
function some_function() {
console.log('changed');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<select id="avoid_id">
<option value="All">All</option>
<option value="1">1</option>
</select>
<select>
<option value="All">All</option>
<option value="1">1</option>
</select>
<select>
<option value="All">All</option>
<option value="1">1</option>
</select>
<select>
<option value="All">All</option>
<option value="1">1</option>
</select>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm trying to create a website that has a drop down menu which is coded like:
<form>
<select name="languages">
<option></option>
<option value"html">HTML</option>
<option value"css">CSS</option>
<option value"js">JavaScript</option>
<option value"csharp">C#</option>
<option value"php">PHP</option>
<option value"java">Java</option>
<option value"phython">Phython</option>
</select>
<br><br>
<input type="Submit">
</form>
And in an ideal world, I'd want the relevent information to be displayed on the same page as the drop down menu. So when a user selects the HTML option, all the information for that will be displayed on the page, then if they choose the PHP option, the HTML information will be cleared and the PHP information will be loaded in.
I have added some Jquery and CSS to your codes. Besides you forgot "=" in your value field. The solution is to get the value from select and use it to decide which Id has to be shown. Please run the code snippet and see the result.
var id;
$("#languages").on("change",function(){
id=$(this).val();
$(".section").hide();
$("#"+id).stop().show();
})
.section{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select name="languages" id="languages">
<option></option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="csharp">C#</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="phython">Phython</option>
</select>
<br><br>
</form>
<div class="section" id="html">html content here</div>
<div class="section" id="css">CSS content here</div>
<div class="section" id="js">js content here</div>
<div class="section" id="csharp">csharp content here</div>
<div class="section" id="php">php content here</div>
<div class="section" id="java">java content here</div>
<div class="section" id="phython">phython content here</div>
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 8 years ago.
Improve this question
I've three select-box here. How can I make this.
<select class="form-control input-lg">
<option value="1">abcd</option>
<option value="2">efgh</option>
<option value="2">ijkl</option>
<option value="2">mnop</option>
</select>
<select class="form-control input-lg">
<option value="10">desk</option>
<option value="20">pen</option>
<option value="30">pc</option>
</select>
<select class="form-control input-lg">
<option value="100"></option>
<option value="200"></option>
<option value="300"></option>
</select>
Fundamentally this is an event driven question.
You want to populate the secondary select based on the first. You can do this with a jquery change event.
http://api.jquery.com/change/
On change, you initiate a callback function that populates the second select box, from there the population of the third is just the same concept.
A high level explanation is as such:
<select id="select1" class="form-control input-lg">
<option value="1">abcd</option>
<option value="2">efgh</option>
<option value="2">ijkl</option>
<option value="2">mnop</option>
</select>
<select id="select2" class="form-control input-lg">
</select>
<script>
$('#select1').change(function(){
alert("Something has changed");
// RUN SOME OTHER FUNCTION TO POPULATE THE SECOND SELECT BOX
// Grab the dom element of the second select
var select2 = $("#select2");
// iterate your data, here an array with an element, and populate the select element
$.each(['some data'], function() {
select2.append($("<option />").val("Something").text("Something else"));
});
})
</script>
Note: For this you will obviously have to include JQuery library in your code
This is also considerably inefficient, but the improvements would take too long to explain in such an open question.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I need to add some default text to a HTML select box. The placeholder tag which works with input doesn't seam to work whit this one?
This works
<td><input type="text" placeholder="<?php echo $lang ['your_website']; ?>"/></td>
This doesn't work
<td><select type="text" placeholder="<?php echo $lang ['select']; ?>"/></td>
How can I fix this?
Are you looking for the selected attribute?
<select>
<option selected="selected">Select Country</option>
<option>United States</option>
<option>Mexico</option>
</select>
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
I think you can use it like this:
<select>
<option selected="selected">Default Option</option>
<option>1</option>
<option>2</option>
</select>
ie, use selected="selected" for the option you want to be the default.
or you may try this:
<select>
<option value="" disabled selected>Default Option</option>
<option value="1">1</option>
</select>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I need to know how I can get information selected in a dropdown list when I press submit and then get the information displayed in a table within the same page.
I have created the dropdown list:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Please let me know how to display if for instance I select Volvo to be displayed within a td:
<table>
<tr>
<td></td>
</tr>
</table>
Thanks
Give your elements a unique ID attribute and it is very easy to do this:
Working jsFiddle example
HTML:
<select id="mySelect">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<table id="myTable">
<tr id="tr-1">
<td id="td-1"></td>
</tr>
</table>
<input id="mybutt" type="button" value="Click Me">
Javascript:
document.getElementById('mybutt').onclick = function() {
var selcar = document.getElementById('mySelect').value;
//alert(selcar);
document.getElementById('td-1').innerHTML = selcar;
};