In the program below I am using fee head id and trying to access dynamic data but when I select or click on any element of the first list it does not go to the next list.
After clicking on any element in first list, the element should disappear from first list and display in the second list. I am using a theme which has built-in classes in JS and JSP.
<div class="panel-body">
<div class="form-group">
<div class="col-lg-12">
<div class="leftBox">
<select id="feesHeads" multiple="multiple" class="multiple nostyle form-control" style="height:300px;">
<!-- <option value="1">Spain</option>
<option value="2">Germany</option>
<option value="3">Uruguay</option>
<option value="4" selected="selected">Brazil</option>
<option value="5" selected="selected">England</option>
<option value="6" selected="selected">Portugal</option>
<option value="7">Argentina</option>
<option value="8">Italy</option>
<option value="9">Croatia</option>
<option value="10">Denmark</option>
<option value="11">Russia</option>
<option value="12">Greece</option>
<option value="13">Chile</option>
<option value="14">Côte d'Ivoire</option>
<option value="15" selected="selected">France</option>
<option value="16">Sweden</option>
<option value="17">Switzerland</option>
<option value="18">Republic of Ireland</option>
<option value="19">Australia</option>
</select> -->
<br/>
<span id="box1Counter" class="count"></span>
<div class="dn"><select id="box1Storage" name="box1Storage" class="nostyle"></select></div>
</div>
<div class="dualBtn">
<button id="to2" type="button" class="btn" ><span class="icon12 minia-icon-arrow-right-3"></span></button>
<button id="allTo2" type="button" class="btn" ><span class="icon12 iconic-icon-last"></span></button>
<button id="to1" type="button" class="btn marginT5"><span class="icon12 minia-icon-arrow-left-3"></span></button>
<button id="allTo1" type="button"class="btn marginT5" ><span class="icon12 iconic-icon-first"></span></button>
</div>
<div class="rightBox">
<select id="box2View" multiple="multiple" class="multiple nostyle form-control" style="height:300px;"></select>
<br/>
<span id="box2Counter" class="count"></span>
<div class="dn"><select id="box2Storage" class="nostyle"></select></div>
</div>
</div>
</div><!-- End .form-group -->
</div>
</div><!-- End .panel -->
</div><!-- End .span6 -->
</div><!-- End .row -->
When you click on the firstList's option remove it from there and append it to the secondList. I've created a simple demo that might go with your scenario.
HTML :
First :
<select id="firstList">
<option>Mango</option>
<option>Banana</option>
<option>Apple</option>
</select>
<br />
Second
<select id="secondList"></select>
jQuery :
$("#firstList").on("change", function(){
var selectedItem = $(this).children("option:selected").val();
$(this).children("option:selected").remove();
$("#secondList").append($("<option> </option>").text(selectedItem));
});
jsFiddle
Note : It's just an overview of how you can implement it. But what you want is entirely upto you.
Related
I have a problem with my select option. I used Contentful model to fetch my data. In the content model, I have given the fields except the select option field. Kindly help me out with this. Here is the code:
products.forEach(product => {
result += `<div class="millet-column">
<div class="img-container">
<img src=${product.image}>
<button class="bag-btn" data-id=${product.id}>
<i class="fa fa-shopping-basket" aria-hidden="true"></i>
Add to Bag
</button>
</div>
<p class="item-name">
${product.title}
</p>
<p class="item-category">
${product.category}
</p>
<br>
<h2 style="float:left;margin-left:3%;margin-top:-2%;"> Rs.</h2>
<div class="total-price">${product.price}</div>
<select id="list" data-price="${product.price}" name="quantity" class="product-select" tabindex="1"
onchange="getSelectValue();">
<option value="250">250 g</option>
<option value="500">500 g</option>
<option value="1000">1 kg</option>
</select>
</div>`
i'm using image-picker.js
How to make the image as default?
<!-- / select number of pet-->
<div class="select-pets text-center">
<p>Select Your Pet</p>
<div>
<select multiple="multiple" class="image-picker show-labels show-html">
<option data-img-src="assets/img/pets/cat1.png" data-img-class="first" data-img-alt="Ricky" value="1" class="stretched-link "> Ricky </option>
</select>
</div>
</div>
<!--/ select number of pet -->
https://rvera.github.io/image-picker/
before tick
after tick
I'm working on a project where a user can select options from three sections on a webpage. Red Wine, White Wine, and Rose. Within those sections, they can choose from a drop-down menu that provides different wines within the category of flavor.
For example, Red Wine wine would allow you to choose from three flavors, white wine would allow you to choose from three other flavors, etc.
The issue I'm having is that whatever section I make last, is the only one that changes. If I go to change the wine selection under red it changes the rose section.
HTML
<div class="vl3"></div>
<div class="vl4"></div>
<div class="redwine">Red Wine<br> </div>
<div class="redwineselect">
<form action="purchase.htm" method="post"><br>
Select Your Red...<br><br>
<img src="merlot.png" id="redSelect" height="400px"> <br>
<select name="redList" onchange="displayImage(this);">
<option value="merlot.png">Merlot</option>
<option value="pinot_nior.png">Pinot Noir</option>
<option value="cabernet_red.png">Cabernet</option>
</select>
<input type="text" value="" placeholder="Quantity" required size="8"><br><br>
<button type="submit" class="submit">Purchase</button>
` </form>
</div>
<div class="whitewine">White Wine<br></div>
<div class="whitewineselect">
<form action="purchase.htm" method="post"><br>
Select Your White...<br><br>
<img src="pinot_grigio.png" id="whiteSelect" height="400px"><br>
<select name="whiteList" onchange="displayImage(this);">
<option value="pinot_grigio.png">Pinot Grigio</option>
<option value="riesling.png">Reisling</option>
<option value="chardonnay.png">Chardonnay</option>
</select>
<input type="text" value="" placeholder="Quantity" required size="8"><br><br>
<button type="submit" class="submit">Purchase</button>
</form>
</div>
<div class="rosewine">Rose Wine</div>
<div class="rosewineselect">
<form action="purchase.htm" method="post"><br>
Select Your Rose...<br><br>
<img src="grenache.png" id="roseSelect" height="400px"><br>
<select name="roseList" onchange="displayImage(this);">
<option value="grenache.png">Grenache</option>
<option value="mourverde.png">Mourverde</option>
<option value="pinot_rose.png">Pinot Rose</option>
</select>
<input type="text" value="" placeholder="Quantity" requried size="8"><br><br>
<button type="submit" class="submit">Purchase</button>
</form>
</div>
JavaScript
function displayImage(elem){var image=document.getElementById("redSelect");image.src=elem.value;
}
function displayImage(elem){var image=document.getElementById("whiteSelect");image.src=elem.value;
}
function displayImage(elem){var image=document.getElementById("roseSelect");image.src=elem.value;
}
Try different method names
<div class="vl3"></div>
<div class="vl4"></div>
<div class="redwine">Red Wine<br> </div>
<div class="redwineselect">
<form action="purchase.htm" method="post"><br>
Select Your Red...<br><br>
<img src="merlot.png" id="redSelect" height="400px"> <br>
<select name="redList" onchange="displayRedImage(this);">
<option value="merlot.png">Merlot</option>
<option value="pinot_nior.png">Pinot Noir</option>
<option value="cabernet_red.png">Cabernet</option>
</select>
<input type="text" value="" placeholder="Quantity" required size="8"><br><br>
<button type="submit" class="submit">Purchase</button>
` </form>
</div>
<div class="whitewine">White Wine<br></div>
<div class="whitewineselect">
<form action="purchase.htm" method="post"><br>
Select Your White...<br><br>
<img src="pinot_grigio.png" id="whiteSelect" height="400px"><br>
<select name="whiteList" onchange="displayWhiteImage(this);">
<option value="pinot_grigio.png">Pinot Grigio</option>
<option value="riesling.png">Reisling</option>
<option value="chardonnay.png">Chardonnay</option>
</select>
<input type="text" value="" placeholder="Quantity" required size="8"><br><br>
<button type="submit" class="submit">Purchase</button>
</form>
</div>
<div class="rosewine">Rose Wine</div>
<div class="rosewineselect">
<form action="purchase.htm" method="post"><br>
Select Your Rose...<br><br>
<img src="grenache.png" id="roseSelect" height="400px"><br>
<select name="roseList" onchange="displayRoseImage(this);">
<option value="grenache.png">Grenache</option>
<option value="mourverde.png">Mourverde</option>
<option value="pinot_rose.png">Pinot Rose</option>
</select>
<input type="text" value="" placeholder="Quantity" requried size="8"><br><br>
<button type="submit" class="submit">Purchase</button>
</form>
</div>
function displayRedImage(elem){var image=document.getElementById("redSelect");image.src=elem.value;
}
function displayWhiteImage(elem){var image=document.getElementById("whiteSelect");image.src=elem.value;
}
function displayRoseImage(elem){var image=document.getElementById("roseSelect");image.src=elem.value;
}
Your three functions have the same name, so they are overriding each other. Give each of them a different name and it will work.
Plunker.
The above plunker is working fine in Chrome and IE. But When comes to Mozilla Firefox it is not.
When I try to select the dropdown the page is reloading.How to stop that issue.
<script type="text/ng-template" id="items_renderer.html">
<div ui-tree-handle>
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
<input type="text" style="display:none" ng-model="item.rowId">
<input type="text" id="componentName{{$index}}" ng-style="getWidth(item.rowId)" ng-change="validateOnChange(item.componentName, 'componentName','',$index)" ng-model="item.componentName" style="width:156px;height: 23px;">
<input type="text" id="componentIdentification{{getRowId(item.rowId)}}" ng-model="item.componentIdentification" ng-change="validateOnChange(item.componentIdentification,'componentIdentification', '',getRowId(item.rowId))" style="width:125px;height: 23px;">
<select ng-model="item.componentType" id="componentType{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.componentType, 'componentType', 'Select', getRowId(item.rowId))" style="width:102px;height: 23px;">
<option>Select</option>
<option ng-repeat="type in typeList" value="{{type.TYPE_ID}}">{{type.COMPONENT_TYPE}}</option>
</select>
<select ng-model="item.componentState" id="componentState{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.componentState,'componentState', 'Select' ,getRowId(item.rowId))" style="width:122px;height: 23px;">
<option>Select</option>
<option ng-repeat="list in statusList" value="{{list.STATUS_ID}}">{{list.STATUS}}</option>
</select>
<select ng-model="item.actionId" id="actionId{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.actionId, 'actionId', 'Select',getRowId(item.rowId))" style="width:103px;height: 23px;">
<option>Select</option>
<option ng-repeat="action in actionList" value="{{action.ACTION_ID}}">{{action.URL}}</option>
</select>
<select ng-model="item.actionToPerform" id="actionToPerform{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.actionToPerform, 'actionToPerform', 'Select',getRowId(item.rowId))" style="width:122px;height: 23px;">
<option>Select</option>
<option ng-repeat="actionPerform in actiontoperformList" value="{{actionPerform.ACTIONPERFORM_ID}}">{{actionPerform.ACTION_TO_PERFORM}}</option>
</select>
you need to remove the ng-model from the ui-tree-nodes div.
change this
<ol ui-tree-nodes ng-model="componentList">
to this
<ol ui-tree-nodes>
Demo
I solved this problem by disabling the drag and drop as it is calling some internal functions hence the page is reloading.
<div ui-tree="options" data-drop-enabled="false" data-drag-enabled="false">
I want to add the following div structure whenever the '+' button [the addMore() function] is clicked. Although i am able to add the div structure, but the alignment of the input text are not equal as compared to the hard coded.
html file:
<form class="align-center">
<p class="6u 12u$(medium)">
Start Date: <input type="date" name="startdate" id="startdate" />
End Date: <input type="date" name="enddate" id="enddate" />
</p>
<p>
<div class="6u$ 12u$(xsmall)"><input type="text" name="numParticipants" id="numParticipants" value="" placeholder="Number of Participants"/></div>
</p>
<p>
<div class="row">
<div class="3u 12u$(medium)">
<div class="select-wrapper">
<select>
<option value="">-Select Programme-</option>
<option value="1">Yogalates</option>
<option value="2">Pilates</option>
<option value="3">Kick Boxing</option>
<option value="4">K-Pop Dance</option>
<option value="5">Hip Hop</option>
<option value="6">Jazz Aerobics</option>
<option value="7">Zumba</option>
<option value="8">Fitball</option>
</select>
</div>
</div>
<div>OR</div>
<div class="3u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Customize your own programme" />
</div>
</div>
<div class="2u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Venue" />
</div>
</div>
</div>
</p>
<p>
<div class="row" id="newProg">
</div>
<div class="row">
<div class="2u 12u$(medium)">
<a class="button" onclick="addMore()"><div style="font-size: 35px">+</div></a>
<a class="button" style="margin:0 0 0 1em" onclick="removeProg()"><div style="font-size: 35px">-</div></a>
</div>
</div>
<div class="2u 12u$(medium); image right">
Submit
</div>
</p>
</form>
main.js
var counter = 0;
function addMore() {
counter++;
var objNewDiv = document.createElement('div');
objNewDiv.setAttribute('id', 'addProg' + counter);
objNewDiv.setAttribute('class', 'row');
objNewDiv.innerHTML = '<div class="5u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div> <div>OR</div> <div class="5u 12u$(medium)"> <input type="text" value="" placeholder="Customize your own programme"/> </div> <div class="3u$ 12u$(medium)"> <input type="text" value="" placeholder="Venue" /> </div> ';
document.getElementById('newProg').appendChild(objNewDiv);
}
Result when page is loaded:
when page loaded
Actual and Expected result:
actual and expected outcome
You have differenc in the class names of the div tags which you are appending in jquery.
Make it same as the Static HTML content, And the expected result will be achieved.
Differences I see is as below.
Static HTML has - <div class="3u 12u$(medium)"> ,Your Jquery HTML has - <div class="5u 12u$(medium)">
Static HTML has - <div class="3u 12u$(medium)">, Your jquery HTML has - <div class="5u 12u$(medium)">
Static HTml has - <div class="2u$ 12u$(medium)">, Your Jquery HTML has <div class="3u$ 12u$(medium)">
Because of the differences in the class names you find the differences in the way its rendered in the UI.
You missed one of your divs in JavaScript inner HTML string. I think it should be like this:
objNewDiv.innerHTML = '<div class="5u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div> <div>OR</div> <div class="5u 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div> <div class="3u$ 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Venue" /> </div> </div> ';