combobox not refresh on value change - javascript

on page init I have following render of combobox element
<div class="combobox-container">
<input type="hidden" name="MySelection" value="">
<div class="input-group">
<input class="combobox form-control" type="text" autocomplete="off" placeholder="Select">
<ul class="typeahead typeahead-long dropdown-menu">
<li class="" data-value="val1">
<li class="active" data-value="val2">
<li data-value="val3">
<li data-value="val4">
<li data-value="val5">
</ul>
<span class="input-group-addon dropdown-toggle" data-dropdown="dropdown">
<span class="caret"></span>
<span class="glyphicon glyphicon-remove"></span>
</span>
</div>
</div>
which renders combo like
after I select option from this combo I'm geting rendered like
now after certain users action I'm resetting combo box on it's default state so I use following code
$('#MySelection').val(undefined);
this actually change value as I expected but ui elemenent stays intact, it appears
and I want to appear as
I tried with $('#MySelection').data('combobox').refresh();
but that doesn't helped.
Update:
As someone suggested I tried with moving $('#MySelection').data('combobox').refresh();
at the end of the file since I'm getting error inside firebug
TypeError: $(...).data(...) is undefined').data('combobox').refresh();
but it doesnt help. I try even to put at the of the _Layout.cshtml file after all jquery init files but also without any progress.

UPDATED: try this:
bootstrap-combobox:
$('#MySelection').val('');
$('#MySelection').data('combobox','refresh');
$(document).ready(function(){
$('.combobox').combobox()
$("#reset").on("click",function(){
$('.combobox').val('');
$('.combobox').data('combobox','refresh');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://formvalidation.io/vendor/bootstrap-combobox/js/bootstrap-combobox.js" type="text/javascript"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="http://formvalidation.io/vendor/bootstrap-combobox/css/bootstrap-combobox.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Vertical Form</h1>
<div class="form-group">
<label>Turns this</label>
<select class="combobox input-large form-control">
<option value="">Select a State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
</select>
</div>
<button id="reset">Reset</button>

This works for me:
$('#MySelection').val('');
$('#MySelection').data("combobox").clearElement();
$('#MySelection').data('combobox').refresh();

Use Below Code to set selected index 0
$('#MySelection').prop('selectedindex',0);

Your element <input type="hidden" name="MySelection" value="">has the name MySelection.
With your $('#MySelection').val(undefined); you're trying to call it by it's ID (not name).
Try $('input[name=MySelection]') instead.

After much searching, I found #mikeblum's solution to work for me.
$('#element').data('combobox').clearTarget();
$('#element').data('combobox').clearElement();

Related

Show selected options as the bootstrap dropdown menu in Html & JavaScript

Is it possible to create a multi-select checkbox dropdown like this in Bootstrap, HTML and JavaScript.
I have tried I couldn't able to achieve it. I'm new to JavaScript as well However I'm just exploring the JS and make it to work but this seems really challenging for me. I don't know how to implement JS script for this.
For instance: If the user selects the countries in the multiselect checkbox I want it to show it all countries name instead of Choose option.
code:
<div>Country</div>
<div class="row" name="country_checkbox" id="id_row">
<div class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">
<span id="selected">Choose option</span><span class="caret"></span></a>
<ul id="id_country">
<li><label for="id_country_0"><input type="checkbox" name="country" value="US"
placeholder="Select Country" id="id_country_0" onclick="filter_type();">
US</label>
</li>
<li><label for="id_country_1"><input type="checkbox" name="country" value="India"
placeholder="Select Country" id="id_country_1" onclick="filter_type();">
India</label>
</li>
<li><label for="id_country_2"><input type="checkbox" name="country" value="Japan"
placeholder="Select Country" id="id_country_2" onclick="filter_type();">
Japan</label>
</li>
<li><label for="id_country_3"><input type="checkbox" name="country" value="UK"
placeholder="Select Country" id="id_country_3" onclick="filter_type();">
UK</label>
</li>
</ul>
</div>
js fiddle here: http://jsfiddle.net/shalman44/92drs7ax/3/
Since you are already using bootstrap, you might aswell want to use jQuery.
There is a plugin called bootstrap-select for achieving a multi select like in your example, where the syntax is as follows:
<select class="selectpicker" multiple>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
$(function () {
$('select').selectpicker();
});
You might also want to have a look at this question.
I just searched google with "bootstrap multiselect" and i found this codepen
$(document).ready(function() {
$('#multiple-checkboxes').multiselect({
includeSelectAllOption: true,
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<div class="">
<strong>Select Language:</strong>
<select id="multiple-checkboxes" multiple="multiple">
<option value="php">PHP</option>
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
<option value="sql">SQL</option>
<option value="jquery">Jquery</option>
<option value=".net">.Net</option>
</select>
</div>

append the multiple selected items from datalist to input tag with comma [duplicate]

In my Laravel app, I have a form to select multiple options. However, I don't want to select multiple options by pressing CTRL and then selecting them. I just want to be able simply click on the options and they should be selected. And, if I click on a selected option again, then it should be de-selected.
How can I achieve this task?
Here is an example of my select options list.
<div class="form-group row">
<label class="col-form-label" for="selectednames[]">Select Name</label>
</div>
<div class="form-group row">
<select multiple name="selectednames[]">
<option value="1">John</option>
<option value="2">Sam</option>
<option value="3">Max</option>
<option value="4">Shawn</option>
</select>
P.S: I am using bootstrap and jquery in my application.
simply use checkbox type as input instead of option, like that:
<div class="form-check">
<input type="checkbox" name="selectednames[]" value = "1" />
<input type="checkbox" name="selectednames[]" value = "2" />
<input type="checkbox" name="selectednames[]" value = "3" />
<input type="checkbox" name="selectednames[]" value = "4" />
</div>
I think you want somethings like this :
$('select[multiple]').multiselect()
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />
</head>
<body>
<select multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
</body>
</html>

how to set scroll function on select box

I want to set scroll function on select box so that whenever i scroll , an alert will be there . i am not able to set that .scroll function of jquery on select. Please tell me how to set it. May be i am doing some mistake in my code.
Code:
<div class="dropdown col-xs-4">
<input list="d1" id="search" name="d1" class="form-control input-xs" placeholder="Search by">
<!-- <datalist id="d1"> -->
<select id="d1">
{{#each data1}}
<option class="form-control" > {{TradeName}} </option>
{{/each}}
</select>
<!-- </datalist> -->
</div>
Js file:
$( "#d1" ).scroll(function() {
console.log("Scrolling");
});
document.getElementById("d1").addEventListener("scroll", scroll);
function scroll() {
document.getElementById("demo").innerHTML = "Scrolled";
}
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div>
<select id="d1" onmousedown="if(this.options.length>5){this.size=5;}" >
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
<option>f</option>
<option>g</option>
<option>h</option>
</select>
</div>
<p id="demo"></p>
</body>
</html>
I just edited the code. As work around you can try this. The text will get display when you do scroll down. This is not such a good approach but for the time being you can use this.

Add text to option with specific ID

Looking to add "ALL" to an option with the Value of "79" with Javascript or JQuery
<select id="locations">
<option value="79"></option>
</select>
End Result should be:
<select id="locations">
<option value="79">ALL</option>
</select>
Thanks for any help :)
EDIT:
Turns out I also need it done to an checkbox too.
<li class=" ">
<label for="ui-multiselect-Location_State-option-14" title="" class="ui-corner-all">
<input id="ui-multiselect-Location_State-option-14" name="multiselect_Location_State" type="checkbox" value="79" title="Maidstone2">
<span></span>
</label>
</li>
Again the end result should be:
<li class=" ">
<label for="ui-multiselect-Location_State-option-14" title="" class="ui-corner-all">
<input id="ui-multiselect-Location_State-option-14" name="multiselect_Location_State" type="checkbox" value="79" title="Maidstone2">
<span>ALL</span>
</label>
</li>
The value is still "79" however the code for the first option didnt work on it.
Thanks again for any help!
You can access the element using attribute selector and set the text using text() method as follows:
$('option[value="79"]').text("ALL");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="locations">
<option value="79"></option>
</select>
or without jQuery:
document.querySelector('option[value="79"]').textContent = "ALL";
You can use attribute-equals-selector:
$('option[value=79]').text('ALL');

Showing 2nd Dropdown based on First drop down not working

I am a newbie learning web development. I am trying to create a simple form with two dropdowns. Based on first drop down second dropn down should be visible.
But it is not working :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="container">
<div class="box">
<form>
<div class="ccms_form_element cfdiv_custom">
<div class="col-md-4">
<label for="inputType">Input Type</label></div>
<div class="col-md-8" style="font-size:16pt;">
<select id="inputType" required name="inputType" style="width:500px" onChange="ChangeDropdowns();">
<option value="">Select Type : Type Of You Want to Process</option>
<option value="text">Text </option>
<option value="genome">Numbers</option>
<option value="chacha">Special Characters</option>
</select>
</div>
</div>
</div>
<div class="style-sub-1" id="dataType" style="display: none;" >
<div class="col-md-4">
<label for="inputType">Data Type</label></div>
<div class="col-md-8" style="font-size:16pt;">
<select id="data" required name="data" style="width:500px">
<option value="">Select Data Source : Where is your Data?</option>
<option value="text">Data is already in Server</option>
<option value="genome">Need to Upload the File</option>
</select>
</div>
</div>
<div class="row">
<script>
function ChangeDropdowns() {
$(".style-sub-1").show();
}
</script>
</body>
</html>
Can someone tell me what I am doing wrong here ?
It looks like you are trying to use jquery (the $ in your javascript code).
However, you haven't specified the jquery script in your html.
Try adding this
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
In between the head blocks
Use the following, using JQuery to detect the change in first select - and include JQuery as Scott said
$( document ).ready(function() {
$("#inputType").on('change', function (){
$(".style-sub-1").show();
});
});

Categories