I have a shared view that is going to be called for each item in a collection. In this view I want to have a dropdown list that will contain the Id, Text and image url of the information selected item. When an Item is selected I want to show the image in an image tag.
I got to this code
<select id="themes" onchange="javascript:document.getElementById('themePlaceHolder').src=this.options[this.selectedIndex].getAttribute('data-url')">
<option value="" data-Url="" >Select a theme</option>
#foreach(Theme theme in Model.Themes) {
<option value="#theme.Id" data-url="#theme.Url" >#theme.Name</option>
}
</select>
<img id="themePlaceHolder" src="" />
This works perfectly when my collection has only one element, but if it has 2 or more, I have issues with the ID used to identify the image tag because it is duplicated.
Is there anyway to generate the ID so it isn't duplicated but still reference it on my onchange element?
Try with jQuery:
Pseudo code:
<select class="themes">
<option value="" data-Url="" >Select a theme</option>
#foreach(Theme theme in Model.Themes) {
<option value="#theme.Id" data-url="#theme.Url" >#theme.Name</option>
}
</select>
<img id="themePlaceHolder" src="" />
$(".themes").change(function(){
// to get selected text
$(this + " option:selected").text();
// to get selected value
$(this).val();
// Now do what ever you want using this value
});
Related
can you help me figure out how to show a notification for specific variants?
If customer selected "IPhone 14" show notification "Thats a Pre-order" and hide this message if the customer changes to "IPhone 13".
{% if selected variant.name contains '14' %}
{p} Thats a Pre-order {/p}
{% endif %}
The main Problem is, that the URL does not change by selecting the variant. Otherwise i could simply check the URL. But in my Case the URL is always the same..
You have a misunderstanding on how liquid works.
Liquid finish executing before the DOM is loaded. (a.k.a the moment you see the page liquid is finished and no code will be processed after that).
What you are describing is interacting with the DOM elements (select or radio buttons) and expecting liquid to execute some code after the variant is changed, which is not possible.
Long story short you need to use Javascript to handle this logic, not liquid.
You can use js to show an specific text for some options and then hide it with all other options, something like this:
$(document).on('change', '.js-variant-id-text', function() {
let
variant_id = this.value,
variant_text = $('.single-product-text[data-variant="' + variant_id + '"]');
variant_text.show()
//get all single product text div's, if it isn't a variant text, hide it.
$(".single-product-text").not(variant_text).hide()
})
.single-product-text {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="{{option_name}}" id="select-{{option_name}}" class="js-variant-id-text">
<option class="js-variant-radio" value="placeholder" disabled selected>Select one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="single-product-text single-option-selector" data-variant="1" style="">Some text for option 1</div>
<div class="single-product-text single-option-selector" data-variant="2" style="">Some text for option 2</div>
<div class="single-product-text single-option-selector" data-variant="3" style="">Some text for option 3</div>
<template>
<select class="form-control" id="sel2" v-model="genre_id">
<option v-for="genre in genres" v-bind:key="genre.id">
{{genre.name}}
</option>
</select
<template/>
<script>
data() {
return {
genre_id: '',
}}
<script>
The code above gets all the genres and once one is picked it returns the genre.name. My question is, instead of returning the genre.name how can I return the genre.id even though I picked the name on my select form?
Add a value attribute:
<select class="form-control" id="sel2" v-model="genre_id">
<option v-for="genre in genres" v-bind:key="genre.id" :value="genre.id">
{{ genre.name }}
</option>
</select>
The value attribute specifies the value to be sent to a server when a form is submitted.
The content between the opening and closing tags is what the browsers will display in a drop-down list. However, the value of the value attribute is what will be sent to the server when a form is submitted.
Note: If the value attribute is not specified, the content will be passed as a value instead.
Reference
I upgraded the jquery library from 1.4.2 to 3.4.0 Have a drop down. .val() is returning the selected value as expected, but .text() is returning is entire object. Need to know how to get the displayed text for the selected option.
$('#properties').change(function(){
var selected_id=$('#properties option:selected').val();
var selected_value=$('#properties option:selected').text();
$('#idresult').text(selected_id);
$('#textresult').text(selected_value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<select id="properties" style="width: 100%; height: 80px;" size="6">
<option value="1">Country</option>
<option value="3">City</option>
<option value="4">Metro Area (Only U.S.)</option>
<option value="2">State/Province</option>
<option value="5">Zip Code (Only U.S.)</option>
</select>
<div id="textresult"></div>
<div id="idresult"</div>
it is working fine when I tried it on jsfiddle and stackoverflow code snippet. But in my code, it is not giving the below values. Any ideas what might have gone wrong. It works fine when I switch back jquery to 1.4.2
selected_id is 1 as expected.
selected_value is k.fn.init [option, prevObject: k.fn.init(1)].
Expecting it to be "Country"
I am new in vue js please help.
I have two dropdowns and that that dropdown create from loop
<select v-if="tour.city_expert == 2" v-model="selected[index]" class="form-control" :id="'city_expert_both'+index" v-on:change="intiTourCityExpert(index, $event)" :disabled="tour.is_disable==true">
<option value="" selected>Select City Expert</option>
<option value="Guideinperson">Guide in person</option>
<option value="AudioGuide">Audio Guide</option>
</select>
I as per image I want reset dropdown if I uncheck the checkbox but only reset single row as I uncheck the checkbox.
I set v-model="selected[index]" on dropdown and set code on uncheck this.$set(this.selected, index, ''); but its not working.
Help
I ran into similar situation, and following worked for me.
And to rest try following anywhere - this.selectedStatus = '0';
<select id="item_status" class="form-control" v-model="selectedStatus">
<option value='0'></option>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
If I were you, I would do something like this:
Add an onchange event to the checkbox with its index:
#change="onChange(index)"
In the methods object define the function
onChange like this:
methods: {
onChange(index) {
this.selected[index] = ''
}
}
If you want to reset the value of dropdown on click on any other button or so, than just set it to null.
this.accountType = null;
My Dropdown:
<ejs-dropdownlist
v-model:value="accountType"
:dataSource="accountTypesData"
:select="accountTypeSelect"
placeholder="Select a type"
></ejs-dropdownlist>
I have a dijit.form.Select on my page:
<c:set var="qualId" value="${previous.qualification.id}" />
<select id="qualification" name="qualification" dojoType="dijit.form.Select" onchange="checkForPHD()">
<option value="-1" label=" "> </option>
<c:forEach items="${requestScope.qualifications}" var="qualItem">
<c:choose>
<c:when test="${qualId eq qualItem.id}">
<option value="${qualItem.id}" selected = "selected">${qualItem.name}</option>
</c:when>
<c:otherwise>
<option value="${qualItem.id}">${qualItem.name}</option>
</c:otherwise>
</c:choose>
</c:forEach>
</select>
Then some javascript that I'm trying to use to set some text to the TEXT of the option chosen from the select box;
function checkForPHD() {
dojo.byId('clazzPHDMessage').innerHTML = dojo.byId('qualification')
.attr('displayedValue');
}
I'd read that the .attr('displayedValue') was suppose to get the text from the selected option in a dijit.form.Select but it doesn't seem to do much? .attr('value') got that values ok but I need the TEXT?
You should use dijit.byId() to get widget instance. Try to use this code to get selected text:
dijit.byId('qualification').attr('displayedValue')
Seems like what you want is the innerHTML of the currently selected option (<option>THIS TEXT??</option>). I think this should do the trick. Loop over all the select's options with getOptions and find the selected one, then return its innerHTML. I don't know if dijit.form.Select has a selectedIndex property, but that would help too.
function getSelectedText() {
dojo.foreach(dijit.byId("qualification").getOptions(), function(opt, i) {
if (opt.selected) {
return opt.innerHTML;
}
});
}
You should try to get the selected node first, then get the attribute you want, as follows:
dijit.byId("qualification").getSelected().attr('innerHTML');
You can try the below Code Snip
dijit.registry.byId("regionList").value;
<select name="regionList" id="regionList" data-dojo-id="regionList" data-dojo-type="dijit/form/Select">
<option value="" selected="true">Select LoB</option>
<option value="Asia" >Asia</option>
<option value="Africa" >Africa</option>
</select>