Develop Reference

add data attributes to <options> rendered by django form library

I have django choice field
The HTML rendered by django looks like this:
<select id="id_action" name="action">
<option value="" selected="selected">---</option>
<option value="query-action-take">Take</option>
<option value="query-action-forward">Forward</option>
</select>
Before executing the action which was choosen by the user, a confirmation should happen. But not all actions need a confirmation. In this example "delete" needs, but "take" does not need a confirmation.
I would like to add html data attributes the options
The result should look like this:
<select id="id_action" name="action">
<option value="" selected="selected">---</option>
<option value="query-action-take" data-need-confirm="False">Take</option>
<option value="query-action-delete" data-need-confirm="True">Delete</option>
</select>
Up to now I found no way to inject the data "need confirmation" into individual choices.
... or am I on the wrong track here?
This question is only about "how to get the data into the html". The evaluation of the data (confirmation popup) is not part of this question.

You need to create a custom Widget for this. If you check out the Django docs for the Select widget (django.forms.Select), you will find a render_option() method. So best to subclass the default Select class and override this method.

The template renderer definitely contains the functionality to add the data, the question is where you get it from.
<select id="id_action" name="action">
<option value="" selected="selected">---</option>
{% for action in actions %}
<option value="{{action.value}}" data-need-confirm="{{action.isConfirm}}">{{action.name}}</option>
{% endfor %}
</select>
Would this be something you want to add to a model? Probably not. But you can add it as a hard coded dictionary too.

multiselect dropdown sorts based on value present in option tag

I am having a multiselect dropdown whose value are populated based on iteration through for each. However the order I am sending the data is not maintained.
Please suggest what should I do.
<select id="secWhse" path="secondaryWarehouse" multiple="true" style="display: none;"
title="Select the secondary warehouse to which you want to give access to the user.">
<option value="1">Enterprise</option>
<option value="14">enter2</option>
<option value="17">enter3</option>
<option value="19">4thenterprise</option>
</select>
But if I am able to print the value directly, Its printing in my order.
UPDATE: Plugin we are using is: http://wenzhixin.net.cn/p/multiple-select/docs/#multiple-select
CODE:
$('#secWhse').multipleSelect({ filter: true,multiple: true});
JSP code to populate select tag:
${item.value}

Dynamically change text in php

hey guys i am building a form in which i want when a user select an option from the dropdown menus a text to be displayed and calculate the price.
The dropdown menu is:
<select id="recipient" name="recipient" tabindex="6" class="selmenu">
<option value="staff">Site Staff</option>
<option value="editor">Editor-in-Chief</option>
<option value="technical">Tech Department</option>
<option value="pr">Public Relations</option>
<option value="support">General Support</option>
</select>
and the other dropdown menu is:
<select id="recipient" name="recipient" tabindex="6" class="selmenu">
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
</select>
What i want to do is when the user selects something from the first and the second menu i want a textfield to change dynamically... can anyone point me the way?

only ajax/jquery could do that in combination of php step might be...
onchange of any dropdown make a ajax request to php script.
return the json response from php script
use this response to either manipulate your form or display data on page.

you don't need to use php for this, it can all be done with jquery/javscript
an example using jquery is below (i had to rename your second select as you had re-used an ID):
$('.selmenu').change(function() {
$('#output').text($('#recipient option:selected').text() + ' ' + $('#recipient2 option:selected').text());
})
output is the id of your textbox.
on a select value being changed, output will be filled with the selected value in both select controls

binding data from controller into select box in Angular.js

I am building an application with Angular js.
I am retrieving a JSON and display in a HTML form.
HTML:
<select class="select optional" ng-model="to"
ng-init="to=$parent.$eval('eligibiltyRules.condition.itineraryZone.to')">
<option value="USD">USD</option>
<option value="Euro">Euro</option>
<option value="Rupees">Rupees</option>
</select>
js:
myApp.controller('eligibilityController', function($scope,sharedProperties) {
$scope.eligibiltyRules=[];
$scope.eligibiltyRules = sharedProperties.getProductEligibilityData();
console.log($scope.eligibiltyRules); //contains the JSON to be displayed in the form
console.log($scope.eligibiltyRules.condition.itineraryZone.to); //contains data to be displayed in selectbox
});
I am able to display the respective JSON values in other form elements.
But not able to populate the data to be displayed in select box.
Please Advice

how to assign javascript variable value to jsp tag attribute?

I have a drop down value list, and user will select a value from this dropdown list.
<strong>SelectPageCount: </strong>
<select id="pageCount" onChange = "setPageSizeValue();">
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="500">500</option>
</select>
I have got the value of the dropdown list in this javascript function.
function setPageSizeValue()
{
var dropDownDocument = document.getElementById("pageCount");
var displayElementDocument = document.getElementById("displayTable");
var pagesize = dropDownDocument.options[dropDownDocument.selectedIndex].value;
displayElementDocument.setAttribute('pagesize', dropDownDocument.options[dropDownDocument.selectedIndex].value);
alert(pagesize);
}*
alter is coming properly displaying the value which we set in the dropdown list.
This is our Jsp
In this jsp in pagesize attribute i want to assign the value of pagesize varialbe made in javascript.
<display:table id="displayTable" name="ewCandidateList" sort="list" pagesize="<%=size %>" requestURI="CandidateSearchResult"
decorator="com.thomsonreuters.legal.lem.lpa.ui.decorator.EWCandidateSearchResultDecorator"/>

You are trying to change, on the client side (JS), a variable that is computed on the server side (JSP). It's not possible...
What you can do is create a form and submit it, have a hidden input element that will be posted by the form to the JSP and then re-render the page with the new value. But you probably don't want to do anything like that as well.
What you really want to do is insert all the content of the display-table into a div, and change the size of the div using javascript.