I found a problem with ubercart for Drupal and I am trying to find a workaround. I would like to display the options of an attribute as radio buttons by default instead of a select box. The problem with ubercart is that there is a way to set the default by setting it at admin/store/attributes/ but it is always overriden at the product level. So the content uploader has to select radio buttons for every product.
The work around I would like to implement is with hook_form_alter or similar. But I am struggling at finding the right function to override. If it can be of any help, here is the source code of the select box:
<div class="attribute attribute-1 odd">
<div id="edit-attributes-1-wrapper" class="form-item">
<label for="edit-attributes-1">
Color:
<span class="form-required" title="This field is required.">*</span>
</label>
<select id="edit-attributes-1" class="form-select required" name="attributes[1]">
<option selected="selected" value="">Please select</option>
<option value="7">Black | 000000</option>
<option value="6">Blue | 5E79A4</option>
<option value="5">Red | C33438</option>
</select>
</div>
</div>
This was fixed in Drupal 7/Ubercart 3. Have you tried deifining product classes and the defaults for that class. Your default options may stick when adding a product under a class.
Related
I've searched a bit but the found solutions here on SO seems not working for me. I have a select input field and I want to assign it a placeholder. I'm using bootstrap 4 and to manage the front-end.
As I understand from the documentation I need to assign the selected hidden or selected disabled to the <option> tag I want to use as placeholder. I've tried but didn't worked.I don't know if this is because I'm using vue.js, is there a fix?
<label>Filter List</label>
<select
class="form-control"
v-model="listFilter"
v-on:change="filterList()"
>
<option value="" selected disabled class="text-hide">Select filter</option>
<option value="a">All</option>
<option value="f">Fe</option>
<option value="m">Mas</option>
<option value="s">Tru</option>
<option value="c">Cou</option>
</select>
I'm trying to implement this "filtered dropdown" pattern for mobile users:
By default, of course, a <select> control is closed, until the user clicks it open.
Is there a simple way to keep it always open? I understand it wouldn't strictly be a "dropdown" then - more like a traditional Windows "list" control.
(Multiple select is not appropriate for this application).
I'm using VueJS if that's relevant.
My current code:
<p>Start typing your suburb name...</p>
<input type="text" length="50" v-model="suburbFilter">
<br>
<select id="suburb-select" v-model="suburb" >
<option v-for="suburb in filteredSuburbs">
{{ suburb }}
</option>
</select>
i use this component
https://paliari.github.io/v-autocomplete/, it's pretty customizable
If it's always open, then you could use <input type="radio">.
Create a filterable list a la: https://www.w3schools.com/howto/howto_js_filter_lists.asp
Then, instead of the <a> tags they're using, you can style a radio input in place of it.
I'm using contact form 7 and here is the actual contact form 7 code to display the select drop down
<div class="select-wpr">[select* program id:program first_as_label required "Choose your program of interest"]</div></div>
<div class="full-width">
<div class="select-wpr">[select* campus id:campus first_as_label "Choose campus"]</div>
</div>
Where can I go and modify the actual select drop down options? I want to add <optgroup> to the select options but can't find where to go and modify that. Where is that located in wordpress?
To my best knowledge there is no possibility to use optgroups with contact form 7. You may send a feature request to the developers, but i doubt that they will implement it as it is not needed too often.
The first possible solution is to use a more flexible Plugin than Contact Form 7 for this purpose or you code this particular form yourself.
The second possibilitiy is to use a JavaScript approach which modifies the select after it is loaded:
$(function(){
var foundin = $('#some_select option:contains("optgroup-")');
$.each(foundin, function(value){
var updated = $(this).val().replace('optgroup-','');
$(this).nextUntil('option:contains("endoptgroup")').wrapAll('<optgroup label="'+updated+'"></optgroup>');
});
$('#some_select option:contains("optgroup-")').remove();
$('#some_select option:contains("endoptgroup")').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="some_select">
<option>optgroup-First Group</option>
<option>Some Option</option>
<option>Some Option</option>
<option>Some Option</option>
<option>Some Option</option>
<option>Some Option</option>
<option>endoptgroup</option>
<option>optgroup-Second Group</option>
<option>Some Option</option>
<option>Some Option</option>
<option>Some Option</option>
<option>Some Option</option>
<option>Some Option</option>
<option>endoptgroup</option>
</select>
(found on CodePen: https://codepen.io/adrian-ortega/pen/Ivzjh)
You can't use optgroup elements in Contact Form 7 drop downs as it doesn't seem to support it in the shortcode syntax unfortunately. The documentation on the official site outlines the possible options.
id:(id)
class:(class)
default:(num)
default:1_2_3
multiple
include_blank
first_as_label
data:(name)
How can I reinitialize selectdd2 dropdown option on change of selectddl dropdown? Anyone can help me on this?
For example : If we select country the corresponding states will be loaded in second dropdown.
HTML Code
<select class="ui search selection dropdown dropdown-spinner" id="selectdd1">
<option value="">Select Country</option>
</select>
<select class="ui search selection dropdown dropdown-spinner" id="selectdd2">
<option value="">Select State</option>
</select>
There is no need reinitialize your dropdown input , all you need is to change options dynamically in select element (state) when the value of your first select element (country) is changed ,by listening to onchange event.
Here is a simple demo example , and here is an example with Semantic-UI countries flags
I have the following code:
<form:select path="roles" items="${roleList}" itemLabel="roleType" itemValue="id" />
It generates html as below:
<select id="roles" name="roles" multiple="multiple">
<option value="1">ROLE_ADMIN</option>
<option value="2">ROLE_HQ</option>
<option value="3">ROLE_MASTER</option>
<option value="4">ROLE_STATE</option>
<option value="5">ROLE_CENTRE</option>
</select>
Also I do not use the multiple optional attribute. Any idea why does the generated HTML contain "multiple="multiple" ?
Just a guess, but since you mapped it on roles, and since roles is probably a collection, it makes sense to make the select box multiple. If it was not multiple, you would only be able to store a single item in the collection. And the tag would not be able to display the selected roles.
EDIT: after reading the source code of the tag, it appears my guess was right. See the forceMultiple() method in SelectTag.