I have the following select form element, and I want to apply the rateit jquery plugin to it.
<select class="test" id="Rating" name="Rating">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
and I am trying to apply the plugin using $("select.test").rateit();, but despite fireQuery showing data attached the the select element that, no effect is made and I am still left with a select box, and not a line of stars.
EDIT
CSS File is included
Here is the page in question
You're using the plugin wrong. See very simple example: http://jsfiddle.net/rudiedirkx/ZuJ2k/
The select has to be there, but you still have to reference the div when you call the plugin: $('div#rating2').rateit();
The div then has a reference to the select with a data attribute: data-rateit-backingfld="select#Rating"
edit
Actually it looks like you're not using the plugin at all? Where do you call the plugin?
edit
This is your code:
rateItDiv = $('<div class="rateit" data-rateit-backingfld="#Rating"></div>');
$("div#ReviewInputZone select.test").after(rateItDiv);
$('div#rateit').rateit();
On the last line, you reference div#rateit, but that div doesn't exist. You just created a div.rateit, not a div#rateit. Change either of those to the other, and it should work. I'd keep the # because that's slightly faster (but you'd have to be sure there's only one of these rateit dropdowns on a page).
So the new first line:
rateItDiv = $('<div id="rateit" class="rateit" data-rateit-backingfld="#Rating"></div>');
edit
Also, you can test it before you change any code. Just open your Javascript console (Firebug in FF or Developer tools in Chrome) and type: jQuery('div.rateit').rateit();
Related
Any solution need only work in WebKit browsers.
The internet is littered with attempts to make this work - some who claim to have it working and some who claim it can't be done. In my experience, none of the suggested methods have worked. Is this simply impossible?
Supposing I have a select like <select id="mySelect" />
Things I've tried:
select::before -- Is added to the DOM, but doesn't render
<label for="mySelect" /> -- Does nothing when clicked/tapped
document.querySelector('select').click() -- Does nothing
The method from this answer (React-specific) -- Cannot assign a click handler or any other handler that can programmatically open the select to begin with
I'm open even to a jQuery solution, even though we're using React and we would be loading jQuery solely for triggering the select to open.
On third party select components: The goal is to trigger the mobile OS's native select control for the user, so something like React-Select is not suitable.
A dirty solution updated from here (https://stackoverflow.com/a/249219/3684265)
var _select = document.getElementById("test");
_select.addEventListener("mouseout",function(){
this.size = 1;
});
_select.addEventListener("mouseover",function(){
this.size = 4;//set to show the number that you want
});
<select id="test">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
</select>
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.
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.
I'm building a select with several options from my php script using pattemplate.
But no matter what I do, the selected option shows in the dom tree like this:
<select id="academicYear">
<option value="1516">2015-2016</option>
<option value="1415">2014-2015</option>
<option selected="" value="1314">2013-2014</option>
<option value="1213">2012-2013</option>
</select>
Is there any way using dom - javascript - jquery to turn:
<option selected="" value="1314">2013-2014</option>
Into:
<option selected value="1314">2013-2014</option>
?
The reason why I need the change: with selected="" I don't get any selection when my select shows in the dialog window where I present it. When I turn it into just select with Firebug and Chrome debug bar the selection works.
Thans a ton!
You can use the id for faster and safer selector:
$('#academicYear option[value="1314"]').prop('selected', true);
The right html sintaxis is:
<option selected="selected" value="1314">2013-2014</option>
I believe setting the value of select will alter that property correctly for you. Otherwise if you still need to change the selected property...
$('option[value="1314"]').prop('selected', true);
I have two options in a combo box.
<select id="selLang">
<option value="/en" >english</option>
<option value="/fr" >french</option>
</select>
When i choose the second option the page is refreshed and the selected option isn't displayed in the top of the combo box (i mean, as the selected item.)
I want to set the selected option to be the selected option which is in the top of the combo box- within the view.
so my question is just how can i do it? or maybe i have to create a cookie? and if so -how do i do t-h-a-t?
Perhaps it's a silly question, but i'm quite new in this region.
Thanks in advance!
you need to set the selected attribute of the option. you can do it as follows:
<select id="selLang">
<option value="en" >english</option>
<option value="fr" selected="selected" >french</option>
</select>
Hope this is what you wanted..
see this
I'd recommend you taking a look at the ASP.NET MVC localization guide which will provide you with some nice ideas about how to implement this.
First, why when you choose the second option, the page is refreshed. Do you have any JavaScript function in action to post your form.
I ask that, because HTML <select> tag's change won't initiate an HTTP Post request. So, please update an explanation for that.
However, let's go back to your question. You can try this:
<select id='selLang' name='selLang'>
<option value="/en" >english</option>
<option value="/fr" >french</option>
</select>
This will cause the <select> tag to become a successful control during a POST request. This means that you can use this to create a script like:
$(function(){
$('#selLang').val('#HttpContext.Request["selLang"]');
});