//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>
Related
Is there an onclick javascript function which would allow me to toggle between two options in a select input, using a button?
<html>
<head>
</head>
<body>
<button id="flavorBtn" class="flavorBtn">Toggle Flavors</button><br><br>
<select name="flavor" id="selectField">
<option value="Vanilla">Vanilla</option>
<option Value="Chocolate">Chocolate</option>
</select>
</body>
</html>
const select = document.querySelector('#selectField')
document.querySelector('#flavorBtn').addEventListener('click', () => {
select.selectedIndex = (select.selectedIndex + 1) % select.options.length
})
<button id="flavorBtn" class="flavorBtn">Toggle Flavors</button><br><br>
<select name="flavor" id="selectField">
<option value="Vanilla">Vanilla</option>
<option Value="Chocolate">Chocolate</option>
</select>
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>
I am creating an example in AngularJs where I have 3 select box. When user select 1st option in first select box so same should not visible in 2 and 3 select box.
For example Men, Women, Child. So if I select Men in first select box same should not come in 2 and 3 select box.
Please guide and help. Below is my code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="carModel1" >
<option value="">Select</option>
<option ng-repeat="car in carList" value="{{car.modelNo}}" ng-show="car.isShow"> {{car.modelName}}</option>
</select>
<select ng-model="carModel2" >
<option value="">Select</option>
<option ng-repeat="car in carList" value="{{car.modelNo}}" ng-show="car.isShow"> {{car.modelName}}</option>
</select>
<select ng-model="carModel3" >
<option value="">Select</option>
<option ng-repeat="car in carList" value="{{car.modelNo}}" ng-show="car.isShow"> {{car.modelName}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carList = [
{isShow: true, modelName: "Fiesta", modelNo: "447"},
{isShow: true, modelName: "Maruti", modelNo: "442"},
{isShow: true, modelName: "Escape", modelNo: "445"}
];
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
<select ng-model="selectedName1">
<option ng-repeat="x in names" ng-if="x !== selectedName">{{x}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["men", "women", "children"];
});
</script>
<p>This example shows how to fill a dropdown list using the ng-options directive.</p>
</body>
</html>
Try this
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/
How can I change the values in the second select on change of the first one?
When I change to Cool drink then show Pepsi, Coac & Sprite only. When I change to Food then show Pizza, Chicken & Bar b Q
<select id="food">
<option>Cool Drink</option>
<option>Food</option>
</select>
<select id="Person">
<option>Pepsi</option>
<option>Coac</option>
<option>Sprite</option>
<option>Bar b Q</option>
<option>Chicken</option>
<option>Pizza</option>
</select>
This can be by using ajax.
<html>
<head>
<title>Food Order</title>
</head>
<body>
<select id="food" >
<option value="1">Cool Drink</option>
<option value="2">Food</option>
</select>
<select id="Person" >
<option>Select Option</option>
</select>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#food").change(function(){
var txt=$("#food").val();
$("#Person").empty();
$.ajax({
url : 'load.php',
method : 'POST',
data : {txt:txt},
success:function(data){
$("#Person").html(data);
}
});
});
});
</script>
</html>
Add another page with the name of (load.php) and add this code
<?php $data=$_POST['txt']; ?>
<?php if ($data == 1): ?>
<option>Pepsi</option>
<option>Coac</option>
<option>Sprite</option>
<?php else: ?>
<option>Bar b Q</option>
<option>Chicken</option>
<option>Pizza</option>
<?php endif ?>
As simple as I could make it. Very weird we cannot use :visible on the options
$('#food').on("change",() => {
const $opts = $('#Person option');
$opts.each((_,el) => $(el).toggleClass("hidden"));
$('#Person').val($opts.not('.hidden').eq(0).val());
})
.hidden {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="food">
<option>Cool Drink</option>
<option>Food</option>
</select>
<select id="Person">
<option value="1">Pepsi</option>
<option value="2">Coca Cola</option>
<option value="3">Sprite</option>
<option value="4" class="hidden">Bar b Q</option>
<option value="5" class="hidden">Chicken</option>
<option value="6" class="hidden">Pizza</option>
</select>
Crate list of drinks and food in JS.
const drinks = ["Pepsi", "Cola"];
const food = ["Pizza 1", "Pizza 2"]
and then create JS function, which will be fired by event onChange and update second dropdown list.
function changeList(name){
if (name === "Food") {
// fill list with foods
}
// fill list with drinks
}
Change the second dropdown contents depending on the data-type attribute of the first select on an onChange event. See below.
$('#food').on('change', function(){
const drink = ["Pepsi", "Coac", "Sprite"];
const food = ["Bar b Q", "Chicken", "Pizza"]
let type = $(this).children(":selected").data('type')
var $dropdown = $("#Person");
if (type=='food') {
arr = food
} else if (type=='drink') {
arr = drink
}
$dropdown.find('option').remove();
for (i = 0; i < arr.length; i++) {
$dropdown.append($("<option />").text(arr[i]));
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Food Order</title>
</head>
<body>
<select id="food" >
<option>Please Select</option>
<option data-type="drink">Cool Drink</option>
<option data-type="food">Food</option>
</select>
<select id="Person" >
<option>Please Select Type</option>
</select>
</body>
</html>