We Keep Coding

How to trigger an Event using an ID in a Select list

I have a select list that triggers DIV tag visibility, which works great, but once I added a new select list it started conflicting with the first list. I need to be able to use the first list to trigger the toggle event independently of any other lists in the code.
I'm to use the select list using a specific ID to properly toggle the DIV visibility but I can't seem to get it right.
$(document).ready(function () {
$("select").change(function () {
$(this).find("option:selected").each(function () {
var optionValue = $(this).attr("value");
if (optionValue) {
$(".divToggle").not("." + optionValue).hide();
$("." + optionValue).show();
} else {
$(".divToggle").hide();
}
});
}).change();
});
This is the select options:
<select id="transferOptions" class="form-control" name="transferoptions" aria-label="Transfer Options" tabindex="">
<option value="fundTransferOption" selected>Select an Option</option>
<option value="achTransfer">ACH Transfer</option>
<option value="flashFundsTransfer">Flash Transfer</option>
</select>
<select id="ConflictingSelectOptionsAlsoCausingDIVToggling">
<option>Choose</option>
<option>Blah</option>
<option>Blah 2</option>
</select>
<div class="achTransfer divToggle">On select show Thing 1</div>
<div class="flashFundsTransfer divToggle">On select show Thing 2</div>
I want to use the Javascript above to specifically work the select list that use the "id="transferOptions", so as I add other select lists to the code it won't conflict with the transferOptionselect list, thus triggering the DIV's in the page.

Use the select ID with its CSS selector #transferOptions. Also changed some logic for you to check out:
$(document).ready(function() {
$("#transferOptions").change(function() {
var optionValue = $(this).val(); // or use javascript: this.value
$(".divToggle").hide(); // hide all .divToggle elements
if (optionValue) { // in your example this is always true
$("." + optionValue).show(); // show the matching element
}
}).change(); // trigger change after document is ready
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="transferOptions" class="form-control" name="transferoptions" aria-label="Transfer Options" tabindex="">
<option value="fundTransferOption" selected>Select an Option</option>
<option value="achTransfer">ACH Transfer</option>
<option value="flashFundsTransfer">Flash Transfer</option>
</select>
<select id="ConflictingSelectOptionsAlsoCausingDIVToggling">
<option>Choose</option>
<option>Blah</option>
<option>Blah 2</option>
</select>
<div class="achTransfer divToggle">On select show Thing 1</div>
<div class="flashFundsTransfer divToggle">On select show Thing 2</div>

You can get the element that event is referring to using event.target instead of using this which in your case refers to the callback function, see example below:
$('select').change(event => {
console.log(event.target.id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select1">
<option>foo</option>
<option>bar</option>
<option>baz</option>
</select>
<select id="select2">
<option>quux</option>
<option>xyzzy</option>
</select>

Select and display content from external div

i tried to display external content div on select option. Here is example
<select>
<option value="http://www.indiansuperleague.com/atletico-de-kolkata/squad/midfielder-3986-arata-izumi-playerprofile">ARATA
IZUMI</option>
<option value="http://www.indiansuperleague.com/atletico-de-kolkata/squad/midfielder-10724-borja-fernandez-playerprofile">BORJA
FERNANDEZ</option>
<option value="http://www.indiansuperleague.com/atletico-de-kolkata/squad/midfielder-10249-clifford-rayes-miranda-playerprofile">CLIFFORD
RAYES
MIRANDA</option>
</select>
<div id="content-display"></div>
When select I want to display content inside <div class="player-detailswrap">. And first option as default.
Please Help

You need change event for select, on which you get the html from selected option value url using jquery get method and then set returned html to required div:
var content_display = $('#content-display');
$('select').change(function(){
$.get(this.value, function( pagehtml ) {
content_display.html( pagehtml );
});
});

Hello there you can try this
$(select).on('change', function(){
$(#content-display).text($(this).val());
})

On the select change event:
Get the selected option value.
Create an iframe with this value as src attribute.
And append it to your div.
This is your way to go:
function displayOption(select) {
var frame = document.createElement("iframe");
frame.src = select.value;
document.getElementById("content-display").innerHTML = "";
document.getElementById("content-display").appendChild(frame);
}
<select onchange="displayOption(this)">
<option value="http://example.com/1">Content 1</option>
<option value="http://example.com/2">Content 2</option>
<option value="http://example.com/3">content 3</option>
<option value="http://example.com/4">Content 4</option>
</select>
<div id="content-display"></div>
This is a jquery solution:
//This code will initialize the div content
//You can use an id with the select if you have many dropdowns in the page
var dropdown = document.getElementsByTagName("select")[0];
$('#content-display').load(dropdown.options[0].value);
function displayOption(select) {
$('#content-display').load(select.value);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange="displayOption(this)">
<option value="http://example.com/1">Content 1</option>
<option value="http://example.com/2">Content 2</option>
<option value="http://www.google.com">content 3</option>
<option value="http://example.com/4">Content 4</option>
</select>
<div id="content-display"></div>
EDIT:
To answer your question about loading a div content from the other page:
If you need to load an external div content, you can use:
function displayOption(select) {
$('#content-display').load(select.value+" #other-page-div-id");
}

(If you're comfortable with using jquery)
$("#select_id").on("input", function(e){
$("#content-display").text($(this).val())
});
Here's a fiddle of it working. on works best for listening for events.

If you would want to do this you can use jQuery AJAX GET or load request and simply feed the selector of the content you want form the page. The only thing is you HAVE to be on the same domain because of Cross Domain Policy.
You can take a look at jQuery Load in docs
$(document).load('test.html #container', fucn...) // Returns #container

Here's the solution
$('#content').change(function() {
$('#content-display').html($(this).val())
});

Assuming your want to load content from url.Use Ajax, it's easily can load contents without page reload.
var toggleContents = document.querySelectorAll('.toggleContent');
if (toggleContents) {
for (var i = 0; i < toggleContents.length; i++) {
toggleContents[i].addEventListener('change', changeContent, false);
}
}
function changeContent() {
var content = document.querySelector(this.dataset.content);
if (content) {
var xhttp = new XMLHttpRequest();
var url_id = '#main-content';
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
content.innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", this.value + url_id, true);
xhttp.send();
}
}
<select class='toggleContent' data-content='#content-display'>
<option value="https://developer.mozilla.org/en-US/docs/Web/JavaScript">Content 1</option>
<option value="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">Content 2</option>
<option value="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">content 3</option>
<option value="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">Content 4</option>
</select>
<div id="content-display"></div>

I hope your problem will resolve, Please use the below code. Please vote for me if my answer right for your question.
$(document).ready(function () {
$('#ddlOption').change(function () {
var val=$("#ddlOption").val();
$("#content-display").html('');
$("#content-display").append(val)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<select id="ddlOption">
<option value="http://example.com/1">Content 1</option>
<option value="http://example.com/2">Content 2</option>
<option value="http://example.com/3">content 3</option>
<option value="http://example.com/4">Content 4</option>
</select>
<div id="content-display"></div>

You can use jQuery in order to do this stuff more easy:
So, the content maybe can't be loaded because of Access-Control-Allow-Origin, this happens when you trying to access a URL you don't own or is reestricted.
Check the code here
jQuery(document).ready(function(){
jQuery("#select-content").change(function(){
var content_url = jQuery("#select-content option:selected").val();
if(content_url){
jQuery("#content-display").load(content_url);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select-content">
<option value="">-- select content --</option>
<option value="http://example.com/1">Content 1</option>
<option value="http://example.com/2">Content 2</option>
<option value="http://example.com/3">content 3</option>
<option value="http://example.com/4">Content 4</option>
</select>
<div id="content-display"></div>

The best way to achieve this would be some simple jQuery functions. In this example, there are 4 divs with different content in each. All are hidden by default.
Then you can use a bit of jQuery to hide and show certain divs based on the selection you make:
$(document).ready(function(){
$('.hidden').hide();
$('#dropdown').on('change', function() {
if (this.value == 'defaultoption') {
$('.hidden').hide();
}
else if (this.value == 'select1') {
$('.hidden').hide();
$("#content1").show();
}
else if (this.value == 'select2') {
$('.hidden').hide();
$("#content2").show();
}
else if (this.value == 'select3') {
$('.hidden').hide();
$("#content3").show();
}
else if (this.value == 'select4') {
$('.hidden').hide();
$("#content4").show();
}
else
{
$("#content-display").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
<option value="defaultoption">Select Content</option>
<option value="select1">Content 1</option>
<option value="select2">Content 2</option>
<option value="select3">Content 3</option>
<option value="select4">Content 4</option>
</select>
<div id="content-display">
<div id="content1" class="hidden">This is some text for content 1</div>
<div id="content2" class="hidden">This is some text for content 2</div>
<div id="content3" class="hidden">This is some text for content 3</div>
<div id="content4" class="hidden">This is some text for content 4</div>
</div>
Hope this helps!

Hide submit button if selected option value is null

I have the following form:
var x = document.getElementById("submit-button");
if (x.selectedIndex.value == null) {
$("#submit-button").css("display","none");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select>
<option disabled selected>Select colour</option>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
</select>
<button id="submit-button" type="submit">Click</button>
</form>
If the selected index of the dropdown is the disabled placeholder option with no value, i want to hide the submit button. As soon as a colour is selected i want to show the button again.
Any help will be appreciated.

You are in the right way. But missing some points with events:
1 - The whole code must be executed when DOM is ready (document loaded)
2 - You must observe the select change event to check for changes
3 - You can use jQuery .hide() and .show() do control the element's visibility
// Executed when DOM is loaded
$(document).ready(function() {
// Executed when select is changed
$("select").on('change',function() {
var x = this.selectedIndex;
if (x == "") {
$("#submit-button").hide();
} else {
$("#submit-button").show();
}
});
// It must not be visible at first time
$("#submit-button").css("display","none");
});
Look this working fiddle

The shortest way would be
$(function(){
$("select").on("change", function(){
$("#submit-button").toggle(!!this.value);
}).change();
});
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<form>
<select>
<option selected value="">Select colour</option>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
</select>
<button id="submit-button" type="submit">Click</button>
</form>

You need to create an event handler for when the dropdown changes. In the example below I've hidden the submit button by default, and when the dropdown changes I toggle the visibility of the button based on if there is a selected value in the dropdown.
I allowed your "Select colour" option to be available just to better demonstrate how the event handler works.
$("#submit-button").hide();
$("select").on("change", function() {
if (this.value)
$("#submit-button").show();
else
$("#submit-button").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select>
<option selected value="">Select colour</option>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
</select>
<button id="submit-button" type="submit">Click</button>
</form>

You should add a listener to your select like this:
$('form select').on('change', function(){
if($(this).val() == null){
$("#submit-button").hide();
}else{
$("#submit-button").show();
}
}).change();
It will check every time that changes the option, hiding the button when the option has no value and showing it when it does. Also, it will trigger that at first to hide for the initial case.

Hi there Kindly try the following solution and tell me if you wanted something like this :
$(document).ready(function(){
if($('select').val() == null){
$('#submit-button').css('display','none');
}
$('select').on('change', function() {
$('#submit-button').css('display','block');
});

jQuery Mobile, Select All Items in an option list

Ok, so I have an issue selecting all items in a multiple select in jQuery Mobile.
Here's the fiddle: http://jsfiddle.net/u41yk3fy/
HTML:
<div data-role="page" id="one">
<div data-role="content">
<label for="sel">Select the Options</label>
<select name="sel" id="sel" data-native-menu="false" multiple="multiple">
<option value="1">Prod 1</option>
<option value="2">Prod 2</option>
<option value="3">Prod 3</option>
<option value="4">Prod 4</option>
<option value="5">Prod 5</option>
<option value="6">Prod 6</option>
</select>
<div class="floatright" data-role="controlgroup" data-type="horizontal">
Select All
Deselect All
</div>
</div>
</div>
Javascript:
function selectAll(select) {
if (select == false) {
$("#sel option:selected").removeAttr("selected");
} else {
$("#sel option").attr("selected", "true");
}
$("#sel").selectmenu("refresh", true);
}
$(document).ready(function () {
$('#selectall').click(function (event) {
return selectAll(true);
});
$('#deselectall').click(function (event) {
return selectAll(false);
});
});
Basically on Chrome, Opera and Safari this actually works. Using IE and Firefox if you select all and deselect all, attempting to select all again no longer works. I have a feeling that this might be a jQuery, jQuery Mobile or Javascript issue and not something I'm doing wrong. However, if I am doing something wrong I'd appreciate the input.

You can try this:
function selectAll(select) {
if (select == false) {
$("#sel").val([]);
} else {
$("#sel option").prop("selected", true);
}
$("#sel").selectmenu("refresh", true);
}
Here is a Demo.

div to show select menu value with jquery

i have a question regarding Jquery
<select id="thechoices">
<option value="0">Select Box</option>
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
</select>
<!-- the DIV -->
<div id="value"> disabled till you make a choice</div>
while the select menu have the choice Select box i need the div to be shown as a small black screen with the disabled message
once the user change the select menu and choose another option the value div shown the selected option for example Box 1 or Box 2

$(document).ready(function() {
// event triggered when options changed
$('#thechoices').change(function() {
// check if first option or other is selected
if ($(this).val() == 0) {
$('#value').addClass('disabled');
$('#value').html($('#value').data('default'));
} else {
$('#value').removeClass('disabled');
$('#value').html($(this).val());
}
});
});
Check out the fiddle: http://jsfiddle.net/gwKfP/1/

Here is a working Example: http://jsfiddle.net/sHqFX/
<select id="thechoices">
<option value="0">Select Box</option>
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
</select>
<!-- the DIV -->
<div id="value"></div>
Put this between head tags
<script type="text/javascript">
$(document).ready(function(){
$("#thechoices").change(function(){
if($(this).val() == 0)
{
$("#value").html("disabled till you make a choice");
$("#value").css("background-color","black");
$("#value").css("color","white");
}
else{
$("#value").html($("#thechoices option:selected").text());
$("#value").css("background-color","white");
$("#value").css("color","black");
}
});
});
</script>

Here's a quick solution, just add this code:
CSS:
<style>
.disabled{
background-color: gray;
}
</style>
JavaScript
function onSelectedOption(){
var selectedText = $("#thechoices option:selected").text();
if($("#thechoices").val() == "0")
$('#value').addClass("disabled").text(selectedText );
else
$('#value').removeClass("disabled").text("");
}
$(document).ready(function(){
onSelectedOption(); //With this we 'disable' when page loads
$('#thechoices').change(onSelectedOption);
});
Hope this helps

Use the jQuery 'change' event. http://api.jquery.com/change/
$('#thechoices').change(function(){
$('#value').css('display','block');
});

$('#thechoices').change(
function() {
$('#value').text(
$('#thechoices :selected').text()
)
}
);