image reference
I want to show two values is one select box
my code :-
<mat-label for="property">Select property</mat-label>
<mat-select class="form-control" formControlName="property" id="property" disableOptionCentering
panelClass="matSelect-class">
<option value="" selected> -Select option- </option>
<mat-option [value]="item.id">
<span class="dropdown-name">Name</span>
<span class="dropdown-address">address</span>
</mat-option>
</mat-select>
What about putting the description in an attribute e.g. title?
$(function(){
$("select").select2({
templateResult: formatOption
});
function formatOption (option) {
var $option = $(
'<div><strong>' + option.text + '</strong></div><div>' + option.title + '</div>'
);
return $option;
};
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.full.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<select style="width:200px">
<option value="optionA" title="Description for A">option A</option>
<option value="optionB" title="Description for B">option B</option>
</select>
Related
I use this link (Select 2 with multiselct option) for my HTML pages.
How can I deselect all selected option by J Query?
I try this code $('#myIdSelectForm > option').removeAttr("selected"); and so many other J Query codes but not working.
$(function() {
$('#field2').select2();
});
$('#myIdSelectForm > option').removeAttr("selected");
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<select name="myIdSelectForm" id="field2" multiple="" multiselect-search="true" multiselect-select-all="true" multiselect-max-items="3" style="display: none;">
<option>Abarth</option>
<option>Alfa Romeo</option>
<option>Aston Martin</option>
<option>Audi</option>
<option>Bentley</option>
<option>BMW</option>
<option>Bugatti</option>
<option>Cadillac</option>
<option>Chevrolet</option>
<option>Chrysler</option>
<option>Citroën</option>
<option>Dacia</option>
<option>Daewoo</option>
<option>Suzuki</option>
<option>Tesla</option>
<option>Toyota</option>
<option>Volkswagen</option>
<option>Volvo</option>
<option>
</option>
</select>
You need to use a proper id selector #field2 not a name as an id.
Here I use a second button just to illustrate clearing all when we click that button by triggering a custom event and then clearing the value then triggering a change.
I also added a button to clear just one - the last selected option in this case.
$(function() {
$('#field2').select2();
$('#field2').on('clear-all', function(event) {
console.log('Doing:', event.type);
$(this).val(null).trigger('change');
}).on('clear-last', function(event) {
console.log('Doing:', event.type);
$(this).find('option:selected')
.last().prop("selected", false);
$(this).trigger("change");
});
$("#test-deselect").on("click", function() {
console.log('clearing');
$('#field2').trigger('clear-all');
});
$("#test-deselect-last-one").on("click", function() {
console.log('clearing last');
$('#field2').trigger('clear-last');
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<select name="myIdSelectForm" id="field2" multiple="" multiselect-search="true" multiselect-select-all="true" multiselect-max-items="3">
<option selected>Abarth</option>
<option>Alfa Romeo</option>
<option selected>Aston Martin</option>
<option>Audi</option>
<option>Bentley</option>
<option>BMW</option>
<option>Bugatti</option>
<option>Cadillac</option>
<option>Chevrolet</option>
<option>Chrysler</option>
<option>Citroën</option>
<option>Dacia</option>
<option>Daewoo</option>
<option>Suzuki</option>
<option>Tesla</option>
<option>Toyota</option>
<option>Volkswagen</option>
<option>Volvo</option>
<option></option>
</select>
<button id="test-deselect" type="button">Deselect all</button>
<button id="test-deselect-last-one" type="button">Deselect last one</button>
I want to use a drop down list with url, when the user choose an element it will be open like a simple link, this is what I did but it's not working, I still in my current page.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#header-link1").change(function() {
if ($(this).val() != '') {
window.location.href = $(this).val();
}
});
</script>
</head>
<body>
<form>
<select name="forma" id="header-link1">
<option value="Select option">
Select option
</option>
<option value="http://www.surtymar.com/fr/reglementation-internationale/">
Réglementation internationale 15
</option>
<option value="http://www.surtymar.com/fr/reglementation-union-europeenne/">
Réglementation 15
</option>
</select>
</form>
</body>
</html>
Try this:-
Use JQuery to achive this.
$(document).ready(function() {
$("#header-link1").change(function(){
if ($(this).val()!='') {
window.location.href=$(this).val();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form >
<select name="forma" id="header-link1" >
<option value="Select option">
Select option
</option>
<option value="http://www.surtymar.com/fr/reglementation-internationale/">
Réglementation internationale 15
</option>
<option value="http://www.surtymar.com/fr/reglementation-union-europeenne/">
Réglementation 15
</option>
</select>
</form>
Try this! Should work! It just select options value and redirect user!
<form >
<select name="forma" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="http://surtymar.com/fr/reglementation-internationale/">Réglementation internationale 15</option>
<option value="http://surtymar.com/fr/reglementation-union-europeenne/">Réglementation 15</option>
</select>
</form>
I have used bootstrap-select.min.js to search in dropdown. But it gives wrong result. My html code looks like below :
<select data-live-search="true" data-live-search-style="startsWith" class="selectpicker">
<option value="4444">4444</option>
<option value="Fedex">Fedex</option>
<option value="Elite">Elite</option>
<option value="Interp">Interp</option>
<option value="Test">Test</option>
</select>
When I write te than it show Elite, Interp and test instead of test.
If I write te than it show only test. SO what should I have to change in my code?
This code snippet shows that your code is working:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<select data-live-search="true" data-live-search-style="startsWith" class="selectpicker">
<option value="4444">4444</option>
<option value="Fedex">Fedex</option>
<option value="Elite">Elite</option>
<option value="Interp">Interp</option>
<option value="Test">Test</option>
</select>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<select data-live-search="true" class="selectpicker">
<option value="4444">4444</option>
<option value="Fedex">Fedex</option>
<option value="Elite">Elite</option>
<option value="Interp">Interp</option>
<option value="Test">Test</option>
</select>
Try this, it works as you expected.
I had a similar problem. My search-result for liveSearchStyle "startsWith" was always empty for each search-value. After a while I've figured out, that this was an mapping issue. This is how it worked for me:
<abp-select
picker-options.bind="{ liveSearch: true, dropupAuto: false, noneSelectedText: '', liveSearchStyle: 'startsWith' }"
collection.bind="items"
selected-item.bind="selectedItem"
data-mapping-structure.bind="{ option: 'standardDisplayText', content: 'standardDisplayText' }"
object-key="key">
</abp-select>
export interface IItem {
key: string;
value: string;
displayText: string;
}
public items: IItem[];
public selectedItem: IItem;
items = [
{ key: '121', value: 'hello', displayText: '121 - hello' },
{ key: '112', value: 'world', displayText: '112 - world' },
];
search for: "12"
result: "121 - hello"
I have a select box and text box like this :
<?php
$receipt="12345";
?>
<form>
<select name="sent" id="sent">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" name="receipt" value="<?=$receipt?>">
</form>
how can I clear the textbox after I choose option No ?
You can achieve it with jQuery change method
create variable receipt
var receipt = "12345"; //replace 12345 with <?php echo $receipt;?>
bind select element with jQuery change method$("#sent").change(function ()
check select element value against var receipt and if true, clear the input.
$(document).ready(function () {
var receipt = "123456";
$("#sent").change(function () {
var sel = $(this).val();
if (sel == 0) {
$("input[name=receipt]").val("");
} else {
$("input[name=receipt]").val(receipt);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select name="sent" id="sent">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" name="receipt" value="123456">
</form>
Fiddle
try this one
its work
i have try it
<html>
<head>
<script>
function Clear()
{
var sent = document.getElementById('sent').value;
if(sent==0){
document.getElementById("receipt").value="";
}
}
</script>
</head>
<body>
<?php
$receipt="12345";
?>
<form>
<select name="sent" id="sent" onchange="Clear()">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" id="receipt" name="receipt" value="<?=$receipt?>">
</form>
</body>
</html>
<?php
$receipt="12345";
?>
<script>
function SetField(val)
{
if(val==0)
document.getElementById('input-field').value='';
else
document.getElementById('input-field').value='<?php echo $receipt;?>';
}
</script>
<form>
<select name="sent" id="sent" onchange="SetField(this.value);">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" id="input-field" name="receipt" value="<?=$receipt?>">
</form>
Much compact
I currently have a drop down list with a few values in it, I was wondering if it is possible to have a image next to the drop down list that changes corresponding to the value in the drop down list?
This the code for my drop down list. If you need anymore information please ask.
<form id="formddl">
<a id="infoheader">GreenB Colour</a> <br><br>
<div class="header">
<select>
<option value="0">Ivory White</option>
<option value="1">Carbon Black</option>
</select>
</div> <br><br>
<script src="fancystyle1/js/jquery.simple.select.js"></script>
<script type="text/javascript">
$(function() {
$('select').selectBoxes();
});
</script>
</form>
You can do it like this:
$("#iama").children().click(function changeImage(){
var value = $("#iama option:selected").val();
if (value == 1){
$("#image").attr("src","http://lorempixel.com/400/200/");
}
else {
$("#image").attr("src","http://lorempixel.com/600/200/");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select id="iama">
<option value=1>image for value 1</option>
<option value=2>image for another value</option>
</select>
<img id ="image" src="http://lorempixel.com/200/200/"/>