I've the below code that is having multiselect dropdown:
<html>
<head><title>Hello</title>
<link rel="stylesheet" type="text/css" href="/static/Semantic-UI-CSS-master/semantic.min.css">
<script src="/static/jquery-3.5.1.min.js"></script>
<script src="/static/Semantic-UI-CSS-master/semantic.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
<select name="skills" id="skills-select" multiple="" class="ui fluid dropdown">
<option value="">Skills</option>
<option value="angular">Angular</option>
<option value="css">CSS</option>
<option value="design">Graphic Design</option>
</select>
<script>
$('#skills-select').dropdown();
</script>
<button class="ui button" id="go">
<i class="play icon"></i>
</button>
<script>
$("#go" ).click(function() {
var x = $('#skills-select :selected').text();
console.log(x)
});
</script>
</body>
</html>
How I read the values of selected options in the drop down list as array.
Example, if I selected both css and angular from the list above, I want to have the output at:
x = ["css", "angular"]
So simple in pure JS:
const getVals = document.getElementById('get-values')
, skillsSelect = document.getElementById('skills-select')
;
getVals.onclick =_=>
{
let choosed = [...skillsSelect.selectedOptions].map(e=>e.value)
console.clear()
console.log( choosed )
}
<select id="skills-select" multiple >
<option value="one" >Skills </option>
<option value="angular" >Angular </option>
<option value="css" >CSS </option>
<option value="design" >Graphic Design</option>
</select>
<button id="get-values">getVals </button>
Use the val() method of jQuery instead of getting the text() and use $('#skills-select') instead of $('#skills-select :selected').
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head><title>Hello</title>
<link rel="stylesheet" type="text/css" href="/static/Semantic-UI-CSS-master/semantic.min.css">
<script src="/static/jquery-3.5.1.min.js"></script>
<script src="/static/Semantic-UI-CSS-master/semantic.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
<select name="skills" id="skills-select" multiple="" class="ui fluid dropdown">
<option value="">Skills</option>
<option value="angular">Angular</option>
<option value="css">CSS</option>
<option value="design">Graphic Design</option>
</select>
<button class="ui button" id="go">
<i class="play icon"></i>
</button>
<script>
$("#go" ).click(function() {
var x = $('#skills-select').val();
console.log(x)
});
</script>
</body>
</html>
Related
I have two inputs one is simple input another is select input with options. How can i achieve that when someone enters value for text input it automatically select correct option.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/04b00d367c.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="container">
<div class="col-md-2">
<label class="text-black" for="test2">Job code</label>
<input type="text" id="test2" name="jobcode[]" class="form-control">
</div>
<div class="col-md-10">
<label class="text-black" for="padalinys">Job</label>
<select class="form-control" name="job[]" >
<option value="1">Administrator - 1</option>
<option value="2">Bartender - 2</option>
<option value="3">Mechanic - 3</option>
<option value="4">Bodybuilder - 4</option>
<option value="5">Doctor- 5</option>
</select>
</div>
</div>
Try this, here the code simply checks if the inputted value is among the options available and changes the selected option to the one whose value is the same as what was entered in the input element.
var test2 = document.getElementById("test2")
var test3 = document.querySelector("[name=job]")
test2.onchange = () => {
if ([...test3.children].some(each => each.value == test2.value)) {
test3.value = test2.value
}else{
test3.value = 1
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/04b00d367c.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="container">
<div class="col-md-2">
<label class="text-black" for="test2">Job code</label>
<input type="text" id="test2" name="jobcode[]" class="form-control">
</div>
<div class="col-md-10">
<label class="text-black" for="padalinys">Job</label>
<select class="form-control" name="job">
<option value="1">Administrator - 1</option>
<option value="2">Bartender - 2</option>
<option value="3">Mechanic - 3</option>
<option value="4">Bodybuilder - 4</option>
<option value="5">Doctor- 5</option>
</select>
</div>
</div>
You can try this:
(function($) {
$('#test2').on('blur', function(e) {
let inputVal = $(this).val();
$('#select option').each(function() {
if ($(this).val() === inputVal) {
$(this).prop('selected', true);
}
})
});
})(jQuery);
Here I get the inserted value at the input field on blur event. And check each option of the select if the value of the option is same as the input field's value. If so then change the selected prop of the option.
How Can I Make an Ajax Combo box, Forexamle Female and Male, and i want To show a Button for Female and a Button for Male,
This is My Code
<!DOCTYPE html>
<html>
<head>
<style>
#for-male, #for-female{
display:none;
}
</style>
</head>
<body>
<form>
<select name="users" id="users">
<option value="">Select a person:</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<button type="submit" id="for-male" styl>Male</button>
<button type="submit" id="for-female">Female</button>
</form> <br>
<div id="txtHint"><b>Person info will be listed here.</b>
</div>
</body>
</html>
You don't need an ajax call. If all you want to do is determine the button that will show based on the option selected.
<body>
<form>
<select name="users" id="users">
<option value="">Select a person:</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<button type="submit" id="for-male" styl>Male</button>
<button type="submit" id="for-female">Female</button>
</form> <br>
<div id="txtHint"><b>Person info will be listed here.</b>
</div>
</body>
The javascript will look like this
$(document).ready(function() {
$('#users').on('change', function() {
$('#for-male, #for-female').hide()
var value = $(this).val()
if(value == "1") {
$('#for-male').show();
} else {
$('#for-female').show();
}
});
});
and the css will be
#for-male, #for-female{
display:none;
}
Essentially what this does is to show a button whenever an option is selected
You can check https://jsfiddle.net/tmwjge9s/1/
//test.js
$scope.popover = {
"title": "Title",
"content": "<select ><option value = "volvo"> Volvo </option> <option value = "saab"> Saab </option> <option value = "mercedes"> Mercedes </option> <option value = "audi" > Audi </option> </select>"
};
// index.html
<button type="button" class="btn btn-lg btn-primary" data-placement="bottom" data-animation="am-flip-x" data-html="true" bs-popover ="popover">Click to toggle popover
<br>
<small>(using an object)</small>
</button>
I am getting button. I am not able to get menu-items. how to popover the selection menu? on click make some alerts on click on menu items.
Thanks in Advance
Use uib-popover-html attribute. Try below.
<html ng-app="demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<h4>Dynamic</h4>
<button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" popover-placement="right" class="btn btn-default">Popover With Template</button>
<button uib-popover-html="htmlPopover" popover-title="Choose" popover-placement="right" class="btn btn-default">HTML Popover</button>
<script type="text/ng-template" id="myPopove.html">
<div>{{dynamicPopover.content}}</div>
<div class="form-group">
<select class="form-control"><option value = "volvo"> Volvo </option> <option value = "saab"> Saab </option> <option value = "mercedes"> Mercedes </option> <option value = "audi" > Audi </option> </select>
</div>
</script>
</div>
<script>angular.module('demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
$scope.htmlPopover = $sce.trustAsHtml('<select class="form-control"><option value = "volvo"> Volvo </option> <option value = "saab"> Saab </option> <option value = "mercedes"> Mercedes </option> <option value = "audi" > Audi </option> </select>');
$scope.dynamicPopover = {
content: 'Choose car',
templateUrl: 'myPopove.html',
title: 'Car list'
};
});</script>
</body>
</html>
I'm new to jQuery and javascript. I've been trying to make a simple application and having a lot of trouble getting the data that the user inputs. I have two drop down lists, and I just want to get the input from each one. It seems that I can only get one or the other. I'm obviously missing something.
<code>
<!DOCTYPE html>
<html>
<head>
<title>Headers and Footers</title>
<!-- the three things that jQuery Mobile needs to work -->
<link rel="stylesheet" href="../jquery.mobile-1.4.2/jquery.mobile-1.4.2.css" />
<script src="../jquery-1.11.0.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.4.2/jquery.mobile-1.4.2.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<!-- This is the first page -->
<section id="firstpage" data-role="page" data-position="fixed">
<div data-role="header" data-theme="b">
<h1 style="text-align:left; margin-left:20px;">Converter</h1>
Options
</div>
<div class="ui-content">
<label for="dose-input" id="dose-input2">Enter Dose of starting Drug</label>
<input type="number" step="0.01" min="0" placeholder="Enter Starting Drug">
<form>
<div class="ui-field-contain">
<label for="select-native-1">Choose starting Drug:</label>
<select name="select-native-1" id="select-native-1" data-native-menu="false">
<option>Choose Starting...</option>
<option value="1">Drug 1</option>
<option value="2">Drug 2</option>
<option value="3">Drug 3</option>
<option value="4">Drug 4</option>
<option value="5">Drug 5</option>
<option value="6">Drug 6</option>
</select>
</div>
</form>
<div class="ui-field-contain">
<label for="select-end">Choose ending Drug:</label>
<select name="select-end" id="select-end" data-native-menu="false">
<option>Choose ending...</option>
<option value="1">Drug 1 </option>
<option value="2">Drug 2</option>
<option value="3">Drug 3</option>
<option value="4">Drug 4</option>
<option value="5">Drug 5</option>
<option value="6">Drug 6</option>
</select>
</div>
<fieldset class="ui-grid-a">
<div class="Clear"><button type="button" id="clear" data-theme="c">Clear</button></div>
<div class="Submit"><button type="button" id="submit" data-theme="b">Submit</button></div>
</fieldset>
<script>
$('#submit').click(function() {
$( "input" )
.keyup(function() {
var value = $( this ).val();
$( "p" ).text( value );
alert(value);
})
.keyup();
var selected_end = $('#select-end').val();
alert(selected_end);
var starting_drug = $('#select-native-1"').val();
alert(starting_drug);
});
</script>
</div>
</section>
</body>
</html> </code>
If I have it set this way, I will only get the value of the entered dosage and the option of the end of the drug. I won't be able to get the option for the beginning of the drug. Any ideas what I am doing wrong?
Your script is pretty confusing... To get values from select menus on submit just do:
$(document).on("click", "#submit", function(event)
{
var dose = $("#dose-input").val();
var drug_start = $("#select-start").val();
var drug_end = $("#select-end").val();
alert(dose + "\n" + drug_start + "\n" + drug_end);
});
Be sure to check for default values on submit.
Check out complete JSFiddle
Stuck to display profile(data from server using $.getJSON) in the same page using jQuery append(), as I'm new to this platform. Commented out the area where I stuck,
<body>
<div id="homepage">
<button id="home">Home</button>
</div>
<div data-role="content" id="old_content" style="text-align: center">
<button data-icon="arrow-d">Select Below Options</button>
<div data-role="fieldcontain">
<select name="select-choice-1" id="select-choice-1">
<!-- <option>--Course--</option> -->
<option value="mba">MBA</option>
<option value="msc">MSc</option>
</select>
</div>
<div data-role="fieldcontain">
<select name="select-choice-1" id="select-choice-2">
<!-- <option>--Country--</option> -->
<option value="India">India</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="China">China</option>
</select>
</div>
<div data-role="fieldcontain">
<select name="select-choice-1" id="select-choice-3">
<!-- <option>--Year--</option> -->
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>
</div>
<button id="go" data-theme="b">Go</button>
</div>
<div id="new_content">
</div>
<div id="profile">
</div>
<div data-position="fixed" data-theme="b" data-role="footer"
data-transition="pop">
<h4>© 2013 example.</h4>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript">
var numRecords = 5 ;
var maxPage = 0 ;
var pro = 0 ;
$course = $('#select-choice-1').val();
$country = $('#select-choice-2').val();
$year = $('#select-choice-3').val();
$(document).ready(function(){
$("#go").click(function(){
$("#old_content").hide();
listStudents(0) ;
});
});
function listStudents(start) {
$.getJSON( "http://example.com/api.php?course="+$course+"&year="+$year+"&country="+encodeURIComponent($country), function( data ) {
$("#new_content").show();
$("#new_content").html('');
maxPage = start + numRecords ;
for(i=start;i<=maxPage;i++)
{
$("#new_content").append("<ul id='new_output_content' onclick='profile("+i+")'><li><img height='50px' width='50px' src="+data[i].profile_image+'/>'+" "+data[i].name+"</li></ul><br/>");
}
$("#new_content").prepend('<button data-theme="b" style="margin-left: 100px;margin-top: 40px;text-align: center;height: 40px;width: 153px;" data-role="button" onclick="listStudents(maxPage)">Next</button>');
});
}
function profile(pro) {
//This is where I stuck.
var profile = "<div id='new_profile' data-role='content' align='center'><img src='"+data[pro].profile_image+"' /><br /><strong>"+data[pro].name+"</strong><br/><br/>Mail ID:<br/><strong>"+data[pro].email+"</strong><br/>Position:<br/><strong>"+data[pro].position+"</strong><br/>Course:<br/><strong>"+data[pro].course+"</strong><br/>Year of Passed Out:<br/><strong>"+data[pro].course_year+"</strong><br/>Country:<br/><strong>"+data[pro].country+"</strong><br/></div>";
$('#profile').append(profile);
}
$(document).ready(function(){
$("#home").click(function(){
$("#new_content").hide();
$("#old_content").show();
});
});
</script>
</body>
</html>
I want to display the profile alone by hiding other 'id' when click particular student. Please someone help.
can you print the data you recive ? first of all i wold recomand another way to loop thrue json objects ... line 79 or so of your script ...
for(i=0;i<=data.length;i++)
data[pro].profile_image/name/etc // you have no data stored as data in the function profile ...
function profile(pro) {
the (pro) variable is actualy a number 0 => maxPage so any data[pro] is undefined ...