I am using bootstrap chosen to render dropdown menu.When I use the following code the rendering works fine.
<div class="row">
<div class="col-lg-3">
<select data-placeholder="Choose a Country" class="chosen-select chosenContainer" tabindex="2">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
</select>
</div>
</div>
Problem occurs when I append the above code to a div ,all the css is lost and a ordinary dropdown menu is displayed.
function populate()
{
var str=" <div class=\"row\">\n" +
" <div class=\"col-lg-3\" " +
" <select data-placeholder=\"Choose a Country\" class=\"chosen-select chosenContainers\" tabindex=\"2\">\n" +
" <option value=\"\"></option>\n" +
" <option value=\"United States\">United States</option>\n" +
" <option value=\"United Kingdom\">United Kingdom</option>\n" +
" <option value=\"Afghanistan\">Afghanistan</option>\n" +
" <option value=\"Albania\">Albania</option>\n" +
" <option value=\"Algeria\">Algeria</option>\n" +
" <option value=\"American Samoa\">American Samoa</option>\n" +
"\n" +
" </select>\n" +
" </div>\n" +
" </div>";
var elementDiv=document.getElementById("dynamicTag");
$("#dynamicTag").append(str);
}
How to not lose the css while appending html to an element?
Are you sure the html you write is correct ?
there's a missing closing > here :
" <div class=\"col-lg-3\" " +
Also you might want to write like this instead :
'<div class="col-lg-3"> '
You don't have to escape double quotes if they are inside single quotes (and vice-versa)
Related
Looking for a cascading dropdown i found this piece of code here, which is working almost perfect for me, but i need to keep the default option in the second select-menu after changing the value in the first one.
https://stackoverflow.com/a/28902561/10391817
function filterCity() {
var province = $("#province").find('option:selected').text(); // stores province
$("#option-container").children().appendTo("#city"); // moves <option> contained in #option-container back to their <select>
var toMove = $("#city").children("[data-province!='" + province + "']"); // selects city elements to move out
toMove.appendTo("#option-container"); // moves city elements in #option-container
$("#city").removeAttr("disabled"); // enables select
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select" id="province" onchange="filterCity();">
<option value="1">RM</option>
<option value="2">FI</option>
</select>
<select class="select" id="city" disabled>
<option>SELECT CITY</option>
<option data-province="RM" value="1">ROMA</option>
<option data-province="RM" value="2">ANGUILLARA SABAZIA</option>
<option data-province="FI" value="3">FIRENZE</option>
<option data-province="FI" value="4">PONTASSIEVE</option>
</select>
<span id="option-container" style="visibility: hidden; position:absolute;"></span>
You can try this code.
<select class="select" id="province">
<option value="1">RM</option>
<option value="2">FI</option>
</select>
<select class="select" id="city" disabled>
<option data-province="DEF">SELECT CITY</option>
<option data-province="RM" value="1">ROMA</option>
<option data-province="RM" value="2">ANGUILLARA SABAZIA</option>
<option data-province="FI" value="3">FIRENZE</option>
<option data-province="FI" value="4">PONTASSIEVE</option>
</select>
<span id="option-container" style="visibility: hidden; position:absolute;"></span>
<script>
$('#province').on('change', function() {
var province = $("#province").find('option:selected').text();
$("#city option[data-province!='" + province + "']").hide();
$("#city option[data-province='" + province + "']").show();
$("#city option[data-province='DEF'").show().prop('selected', true);
$("#city").removeAttr("disabled");
});
</script>
https://jsfiddle.net/sg0t23bc/5/
I want to combine select options in one span using jQuery or JavaScript.
This is my HTML code:
<body>
<label>Product:</label>
<select id='Product' value='Product'>
<option value=" " selected>--Select your Product--</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<label>Subproduct:</label> <select id='SubProd' value='SubProd'>
<option value=" " selected>--Select your Subproduct--</option>
<option>Sub 1</option>
<option>Sub 2</option>
</select>
<br>
<span id="joined"></span>
</body>
In the span I want show Product1/Sub1 depending on the option selected. I've been searching but I can't find something useful for me.
Although your question seems a little unclear,check if this works
$('#Product,#SubProd').on('change',function(){
$('#joined').html( $('#Product').find('option:selected').text() + "/" + $('#SubProd').find('option:selected').text());
});
ps: You will need to have some checking condition to prevent displaying the "Select an option" tag.
You need to use change event to get real-time updated values. and you can directly use $("#Product").val() to get the value instead of option:selected, because change event would always give you updated value:
$("#Product, #SubProd").on('change', function() {
$("#joined").text($("#Product").val() + "/" + $("#SubProd").val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Product:</label> <select id='Product' value='Product'>
<option value=" " selected>--Select your Product--</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<label>Subproduct:</label> <select id='SubProd' value='SubProd'>
<option value=" " selected>--Select your Subproduct--</option>
<option>Sub 1</option>
<option>Sub 2</option>
</select>
<br>
<span id="joined"></span>
I have a dropdown list, which is a combination of two values: engine.number and engine.name. After an option is selected passNumber() function should be called. The function is called after the selection of the option, but it does not pass the "engine.number" value. It becomes 'undefined' when I debug the js function. What am I missing here?
HTML:
<div class="controls">
<select class="span3" ng-model="selectedEngine" ng-options='engine.element as (engine.number + " " + engine.name) for engine in engines' data-ng-change="passNumber(engine.number)">
<option value="">Please Select...</option>
</select>
<span class="help-inline" id="loadingEngines" rel="spinner"></span>
</div>
Function:
$scope.passNumber = function(number) {
//do something
}
Edit:
I tried selectedEngine, selectedEngine.number, engine, engine.number to pass they are all 'undefined'
It's because it has no idea which repeated instance you're trying to pass. You need to pass in the ngModel - so change your model to be the entire object and pass that:
<select class="span3" ng-model="selectedEngine" ng-options='engine as (engine.number + " " + engine.name) for engine in engines' data-ng-change="passNumber(selectedEngine.number)">
<option value="">Please Select...</option>
</select>
First to all...
Is the select loading data? Maybe you´re not using an controller directive.
<div class="controls" data-ng-controller="MyController">
<select class="span3" ng-model="selectedEngine" ng-options='engine.element as (engine.number + " " + engine.name) for engine in engines' data-ng-change="passNumber(engine.number)">
<option value="">Please Select...</option>
</select>
<span class="help-inline" id="loadingEngines" rel="spinner"></span>
Change your ng-options's data-ng-change to pass in the selectedEngine from ng-model:
<div class="controls">
<select class="span3" ng-model="selectedEngine" ng-options='engine.element as (engine.number + " " + engine.name) for engine in engines' data-ng-change="passNumber(selectedEngine)">
<option value="">Please Select...</option>
</select>
{{ selected }}
</div>
See Plunkr
I am working on an existing website which limits me to touch HTML code. In the code below, there are 3 rows with the same CLASS (sameRow),.Row numbers may differ from case to case. Inside each row contains DIV with unique ID and a corresponding SELECT element with the same CLASS (sameSelect).
My target output is to be able create a JS/Jquery code to store these unique div IDs individually in the array and display each ID in the alert. Currently, my code below is displaying only the ID of the first DIV. The second and the third is not displayed. What could be wrong in my code?
Any help is greatly appreciated. Fiddle link here -> https://jsfiddle.net/philcyb/crkLgxhd/
HTML:
<div class="sameRow">
<div id="uniquediv1">
<select class="sameSelect">
<option>1</option>
<option selected>2</option>
</select>
</div>
</div>
<br />
<div class="sameRow">
<div id="uniquediv2">
<select class="sameSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option selected>4</option>
</select>
</div>
</div>
<br />
<div class="sameRow">
<div id="uniquediv3">
<select class="sameSelect">
<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>
<option value="6" selected>6</option>
</select>
</div>
</div>
JS/JQuery:
$(document).ready(function(){
var optionValue = new Array();
var rows = document.querySelectorAll('.sameRow').length;
alert("there are " + rows + " rows");
for(i = 0; i < rows; i++ ) {
optionValue[i] = $(".sameSelect").parent().attr("id");
alert("array row number " + i + " is " + optionValue[i]);
}
});
Just use eq
$(document).ready(function(){
var optionValue = new Array();
var rows = document.querySelectorAll('.sameRow').length;
alert("there are " + rows + " rows");
for(i = 0; i < rows; i++ ) {
optionValue[i] = $(".sameSelect").parent().eq(i).attr("id");
alert("array row number " + i + " is " + optionValue[i]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="sameRow">
<div id="uniquediv1">
<select class="sameSelect">
<option>1</option>
<option selected>2</option>
</select>
</div>
</div>
<br />
<div class="sameRow">
<div id="uniquediv2">
<select class="sameSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option selected>4</option>
</select>
</div>
</div>
<br />
<div class="sameRow">
<div id="uniquediv3">
<select class="sameSelect">
<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>
<option value="6" selected>6</option>
</select>
</div>
</div>
$(document).ready(function(){
var optionValue = new Array();
$('.sameRow').each(function(i){
optionValue[i] = $(this).find('.sameSelect').parent().attr("id");
alert("array row number " + (i + 1) + " is " + optionValue[i]);
});
});
JSFIDDLE
I think in this case no need for array you can use
$(document).ready(function(){
$('.sameRow').each(function(i){
var getID = $(this).find('.sameSelect').parent().attr("id");
alert("array row number " + (i + 1) + " is " + getID);
});
});
JSFIDDLE
I am trying to retrieve the values entered in the form below to pass into a PHP file so I can add the values into the database. The problem is I am only getting one of the values to pass into the PHP page, the URL bar only shows one value which is equipmentList I am new to JavaScript and PHP but I am guessing the solution is relativly simple. I know the problem is not with my PHP file because right now for testing/learning purposes I am only using echo to print the value of the $_GET variables that appear in the URL bar. My code below:
<form id="updateForm" action="formPage.php">
<input type="text" id="jobDescription" style="display: none"/>
<label id="equipRan" style="display: none">Equipment ran</label>
<div id="drops">
<div id="equipType">
<select size="1" name="equipmentList" title="" id="equipmentList" style="display: none">
<option value="">Select Machine</option>
<option value="EX">Excavator</option>
<option value="DZ">Dozer</option>
<option value="SC">Scraper</option>
</select>
</div>
<div class="unitDropDowns">
<div class="EX">
<select class="exUnitNumbers">
<option value="">Unit number</option>
<option value="01E">01E</option>
<option value="2E">2E</option>
<option value="4E">4E</option>
</select>
</div>
<div class="DZ">
<select class="dzUnitNumbers">
<option value="">Unit number</option>
<option value="01D">01D</option>
<option value="2D">2D</option>
<option value="1D">1D</option>
</select>
</div>
<div class="SC">
<select class="scUnitNumbers">
<option value="">Unit number</option>
<option value="54C">54C</option>
<option value="53C">53C</option>
<option value="52C">52C</option>
</select>
</div>
</div>
</div>
<button type="submit" id="updateButton" onclick="dbQuery()" style="display: none">Submit</button>
</form>
JavaScript Function:
var dbQuery = function(){
var description = document.getElementById("jobDescription").value;
var selectedEquip = document.getElementById("equipmentList");
var selectedEquip1 = selectedEquip.options[selectedEquip.selectedIndex].text;
var selectedVisibleValue = $(".unitDropDowns select:visible").val();
document.getElementById("descriptionSummary").innerHTML = "<h3>Description</h3>" + "<p>" + description + "</p>";
document.getElementById("equipmentRan").innerHTML = "<h3>Equipment Ran </h3>" + "<p>" + selectedEquip1 + "</p>" + "<h3>Unit Number</h3>" + "<p>" + selectedVisibleValue + "</p>";
document.getElementById("equipmentRan").style.display = "block";
document.getElementById("descriptionSummary").style.display = "block";
document.forms["updateForm"].submit();
}
Only your equipmentList select has a name and id.
In order for the value of an html element such as input or select to be included in request submitted by the form, these elements must have name attribute defined.
The purpose of your dbQuery function is not clear. Html that you construct there will at best quickly flash in front of the user and then will be replaced by the new page returned from the server.