My question is about java script, i want to put or add a div or button or input inside select tag using java script.
I using jquery.sumoselect plugin that make you multiple checkbox, but when i want to add some DIVs inside select tag is showing outside the list.
i want the div inside select element like this picture : http://i.stack.imgur.com/Xd6FX.jpg
this is my html code
<div class="select-box-style right">
<div class="your-list-title">Your Lists</div>
<select multiple="multiple" class="md_what_get right SlectBox">
<option selected value="electronics">Electronics</option>
<option value="games">Video Games</option>
<option value="books">Books</option>
<option value="others">Others</option>
<option value="others"><input type="text" name="lname"></option>
</select>
<div class="add-list-box">
<input type="text" class="input-add-list"/>
<label class="label-spcbtn-blue spr" >Add</label>
</div>
</div>
and this how to call the plugin:
<script type="text/javascript">
$(document).ready(function () {
$('.SlectBox').SumoSelect();
});
</script>
thank you for helping!
....
Update!
see this link http://wenzhixin.net.cn/p/multiple-select/docs/
On The Filter1 you can see the input search inside select element, how can i do that?
Neither SumoSelect or MultipleSelect (as is) supports the feature you are looking at. But, first, some clarification needed:
<select> boxes are a standard HTML tag, that accepts no other tags than <optgroup> or <option>. see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
SumoSelect and MultipleSelect are both Javascript plugins that “converts” real selects into custom built <div> tags, with javascript to handle the logic.
That said, you can either modify/extend those plugins to create the desired <div> or you can build your own “<select> into <div> converter”.
But, for the sake of simplicity, you could just create a <div> with all the desired functionality, using regular plain old checkboxes, and hiding/displaying the whole <div> according to your UX flow/needs.
Related
I'm using Rails 5.2.0 with Slim-lang and MaterializeCSS
I'm using javascript to dynamically populate a select dropdown, as shown here.
The code works in the sense that the select element gets populated properly. However, the combo list displayed on screen is not populated! When inspecting the html output in Chrome browser, I found that the "select" is actually comprised of:
<input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-f6b96705-f301-b1b9-c113-84ee91f6897a">
<ul id="select-options-f6b96705-f301-b1b9-c113-84ee91f6897a" class="dropdown-content select-dropdown" tabindex="0" style="">
</ul>
<select id="crit_type" name="crit_type" onchange="loadCritValues(this.value)" tabindex="-1"><option value="Select Criteria">Select Criteria</option>
<option value="age_group">age_group</option>
<option value="gender">gender</option>
<option value="current_country">current_country</option>
<option value="home_country">home_country</option>
<option value="first_language">first_language</option>
</select>
As you can see, the select options are properly populated. But it turns out that the "input" and "ul" elements dictate what gets displayed on screen. And the "ul" is naturally empty.
Is there any way to solve this issue, other than having to also modify the "ul" content?
It turns out that the issue I'm facing with select is linked to MaterializeCSS. The HTML it generates is structured in the format I mentioned as per:
https://materializecss.com/select.html
I can just override that behaviour by assigning 'browser-default' class to the select tag:
select id="crit_type" name="crit_type" onchange="loadCritValues()" class="browser-default" =options_for_select(#crit_types)
This will provide the select tag only without the additional html elements, and allows me to manipulate the select with javascript.
I've searched online and didn't find even one example of a combo box which could be rendered using plain HTML and Javacript.
Is it possible to have a combobox using standard HTML and Javascript? By combo-box, I mean where input is also possible and a drop-down options are also possible - in a single element. I'm not looking for one select box and in addition another input box.
An example of what I'm looking for is:
https://demos.telerik.com/kendo-ui/combobox/cascadingcombobox
However, I don't want to use any Javascript library like jQuery.
Seems you are looking for datalist.
datalist is an html5 component. This same feature can be created using input box and ul, li elements
<label for="countries">Choose a Country:</label>
<input list="countryList" id="countries" name="countries" />
<datalist id="countryList">
<option value="India">
<option value="France">
<option value="Isreal">
<option value="USA">
</datalist>
I have the following code on another webpage on my site with a form (say on page index.html): JSFiddle
<select class="select form-control" id="dropdown" name="dropdown" onchange="showForm()">
i.e a dropdown form.
I want to have a link on another webpage that will go to this page, and have the "Sales" option already selected.
<option value="1">
Sales
</option>
from the drop down menu (instead of the current default option), how do I create this?
Query parameters can be used to achieve the result you want, but you will need to parse the query parameter manually on your current page, since there is no standard JavaScript method for doing it.
You can write the following code on your page to automatically select the option:
$(document).ready(function() {
// Parse your query parameters here, and assign them to a variable named `queryParams`
var option = queryParams.type;
$("#dropdown").val(option);
});
Now you can create an anchor with the URL of this page, e.g. http://yourpage.url?type=1, which will redirect to this page, and will automatically change the value of your dropdown accordingly.
You must add some kind of router functionality with Javascript in your site.
I think the simplest thing you could do it to have a script in that page that checks the url if it has say a #bar hash like so: http://yoursite.com/foo.html#bar.
<script>
// make sure you run this on DOM ready like in $.ready() in jQuery or in a script just before closing the body tag
if(window.location.hash === 'bar') {
// add the selected attribute to the <option> you want
}
</script>
Try with append() function of jquery .and pass this with in onchange function call .And also added with document.ready for create the link on document load with selected value
function showForm(that){
var s = $(that).children('option:selected').text()
$('#link_box').append(''+s+'</br>')
}
$(document).ready(function(){ // for window load
showForm($('select'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group ">
<label class="control-label" for="dropdown">
What can we help you with?
</label>
<select class="select form-control" id="dropdown" name="dropdown" onchange="showForm(this)">
<option value="0" disabled>
Select an option
</option>
<option value="1" selected>
Sales
</option>
<option value="2">
Complaints
</option>
<option value="3">
Queries
</option>
<option value="4">
Ideas
</option>
</select>
</div>
<div id="link_box">
<!-- its a link append box-->
</div>
I'm trying to add a HTML link to an input box using the following jQuery:
var E = "<a class='tagged_person' contenteditable='false' href='http://www.google.com'>Click This</a>";
$("input[name='newComment']").val(E);
Which is working, but its literally displaying the <a href..., which is what I wanted backend wise, but on the frontend, I'd like the user to see it as rendered as a HTML <a> link. Just like on Facebook/Twitter you can tag users and then there's a link.
I think you're looking for the JQuery method .append. That lets you pass a string of HTML and have it parsed into the DOM. Check it out here
For example:
$('#myDiv').append('Search for it!');
There's also .appendTo() if it suits your aesthetic better.
Edit: If you're trying to literally stick html as the value of a text input, you can't do that. <input type="text"> carry text, and that's it. You'd have to make your own input form, or use a JQuery plugin. Why would you want to have a link in a form input anyway though? Sure, you could have the user redirected when clicking the form through different event handlers, but input is for inputting. If it redirects, then you didn't really want an input in the first place.
You can use the following code, which when select it will open the link in a new window.
<form action="../">
<select name="myDestination">
<option value="http://www.website1.com/">Website 1</option>
<option value="http://www.google.com/">GOOGLE</option>
</select>
<input type="button"
value="Open in New Window!"
onclick="ob=this.form.myDestination;window.open(ob.options[ob.selectedIndex].value)">
</form>
Or without the need to press a button:
<form action="../">
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option value="">Choose a destination...</option>
<option value="http://www.website1.com/">Website 1</option>
<option value="http://www.google.com/">GOOGLE</option>
</select>
</form>
Also created a jsfiddle to demonstrate: jsFiddle
I am creating a plugin for jQuery to create pretty select boxes (I know there are some out there, but this is learning experience for me).
If all goes well I realease the plugin to the public, so I am trying to build it as flexible as possible, and for this reason I am struggling to select the parent form element that houses the select that I am trying to target. Regardless of how a user sets up there HTML, I want to be able to select the parent form element.
Below is my HTML,
<div class="grid_6 alpha quick_search">
<h3>Quick Search Talent</h3>
<form action="http://urbantalent.tv.local/search/quick" method="post" accept-charset="utf-8" class="quick_form"><div style="display:none">
<input type="hidden" name="csrf_urbantalent" value="a8db11249b37322da84d3a211a933b19" />
</div>
<div class="formRow drop_down">
<select name="type">
<option value="0" selected="selected">I'm looking for...</option>
<option value="1">actors</option>
<option value="2">presenters</option>
<option value="3">voice overs</option>
</select>
</div>
<button type="submit" name="submit_search"><img src="http://urbantalent.tv.local/media/images/site/quick_submit.png" /></button>
</form>
</div>
As you can see from this HTML the selects parent is actually, .formRow how can I select the just the parent form, I have tried doing this,
$(this).parent('form') however this doesn't work as we know that form is not actually the parent.
You need this:
$(this).closest("form")
jQuery reference: http://api.jquery.com/closest/