Initially i have one textbox/selectbox when user enters something or selects something generate another textbox/selectbox and also i can set limit how many textbox/selectbox can be generated.
please advice me how can i achieve this
You can use jQuery append() method to create html dynamically.
$("#ddlOptions").on("change", function(e) {
var len = $('.txtInput').length;
if (len == 0) {
$('.container').append('<br> <input type="text" id=txtTextBox_' + len + ' class="txtInput" /> <br>');
}
});
$(document).on("change", '.txtInput', function() {
var len = $('.txtInput').length;
if ($(this).val() != "") {
$('.container').append('<br> <input type="text" id=txtTextBox_' + len + ' class="txtInput" /> <br>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<select id="ddlOptions">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>
</div>
var counter=0;
function generate(){
var newTxt='<input type="text">';
var newSel='<select><option value="">--select--</option></select>';
var txtlimit=document.getElementById('txtlimit');
var div=document.getElementById('newCtrls');
var totalElem=div.getElementsByTagName('input').length;
if(!isNaN(txtlimit.value) && txtlimit.value!=''){
if(parseInt(txtlimit.value)>counter &&
parseInt(txtlimit.value)>totalElem){
div.innerHTML += newTxt + newSel+'<br>';
counter++;
}
}else{
div.innerHTML +=newTxt + newSel+'<br>';
}
}
<input type="text" id="txtlimit" placeholder="Enter Limit"><br>
<input type="text" onkeyup="generate();">
<select onchange="generate();">
<option value="Item1">--select--</option>
<option value="Item1">Item1</option>
<option value="Item2">Item2</option>
<option value="Item3">Item3</option>
</select><br>
<div id="newCtrls">
<h3>Dynamic Controls Here</h3>
</div>
Related
I want to prevent multiple selections of same value in my project.
My form
<div class="form-row">
<div class="form-group col-md-6">
<select name="number" class="form-control" id="index0">
<option value="">Select Number</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="form-group col-md-4">
<button class="btn btn-primary" id="addNumber" onclick="addNumber();">Add Number</button>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<select name="letter" class="form-control" id="index00">
<option value="">Select Letter</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
<div class="form-group col-md-4">
<button class="btn btn-primary" onclick="addLetter();">Add Letter</button>
</div>
</div>
<div class="newHtml">
<div class="newLetter">
</div>
</div>
I have two select box one for number and one for letter.
A number can have many letters eg, number 1 can have letters A,B,C,D,E, etc and same goes for other numbers.
When I append new form clicking add number button the selected number should not display there. And if for number 1 letter A is already selected then A should not appear for that number 1 if I click add letter button.
How to achieve that?
Actually it's not so much hard with jQuery/CSS selectors. Try that one:
let letters = ["A", "B", "C", "D", "E"];
function addNumber() {
let val1 = $("#index0").val();
let val2 = $("#index00").val();
if ($(".newLetter > .number[data-value=" + val1 + "]").length == 0) {
$(".newLetter").append(
'<div data-value="' + val1 + '" class="number">' + val1 + "</div>"
);
$('#index0 > option[value="' + val1 + '"]').remove();
$('#index00 > option[value="' + letters[parseInt(val1) - 1] + '"]').remove();
}
}
function addLetter() {
let val1 = $("#index0").val();
let val2 = $("#index00").val();
if ($(".newLetter > .letter[data-value=" + val2 + "]").length == 0) {
$(".newLetter").append(
'<div data-value="' + val2 + '" class="letter">' + val2 + "</div>"
);
$('#index1 > option[value="' + val2 + '"]').remove();
}
}
Look at it on codepen
You should create an array, so can integrate the values. I may not understand correctly.
Is this something like you want to achieve?
let records = [];
const numberDropdown = document.querySelector("#dropdown-number"),
letterDropdown = document.querySelector("#dropdown-letter"),
submitButton = document.querySelector("#submit-btn");
submitButton.addEventListener("click", handleEntry);
numberDropdown.addEventListener("change", updateDropdowns);
letterDropdown.addEventListener("change", updateDropdowns);
function handleEntry() {
let selectedNumber = numberDropdown.value,
selectedLetter = letterDropdown.value;
records.push({
number: selectedNumber,
letter: selectedLetter
});
updateList();
updateDropdowns();
let i = 0;
while (letterDropdown.options[i].disabled) {
i++
};
letterDropdown.selectedIndex = i;
}
function updateDropdowns() {
if (records.length) {
let noLeft = true;
document.querySelectorAll("#dropdown-letter option").forEach((option) => {
let taken = false;
records.forEach((record) => {
if (
option.value == record.letter &&
numberDropdown.value == record.number
) {
taken = true;
}
});
if (taken) {
option.disabled = true;
} else {
option.disabled = false;
noLeft = false;
}
});
if (noLeft) {
submitButton.disabled = true;
alert('select another number');
} else {
submitButton.disabled = false;
}
} else {
document.querySelectorAll("#number-dropdown option").forEach((option) => {
option.disabled = false;
});
}
}
updateDropdowns();
updateList();
function updateList() {
document.querySelector('#list').innerHTML = '';
records.forEach((record) => {
document.querySelector('#list').innerHTML += `<li>${record.letter} | ${record.number}</li>`
});
}
<select id="dropdown-number">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="dropdown-letter">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<button id="submit-btn">Add</button>
<p>Entries:</p>
<ul id="list"></ul>
I am having div with input elements with Add and Cancel buttons.
When user clicked on add Button,I need to generate div with the same input elements and capture the value to JSon object.
Here is my code snippet
<div id="filterfields" class="row collapse">
<form class="form-inline" id="filterFieldsForm">
<select class="form-control" name="TypeCode" id="filterType_0">
<option value="Type">Type</option>
<option value="SubmittedBy">SubmittedBy</option>
<option value="Date">Date</option>
<option value="Description">Description</option>
</select>
<select class="form-control" name="Filter" id="filterCondition_0">
<option value="Equal">Equal</option>
<option value="StartsWith">Starts With</option>
<option value="EndsWith">Ends With</option>
<option value="Greaterthan">Greater Than</option>
<option value="Lessthan">Less Than</option>
</select>
<input type="text" name="caseFilterText" class="form-control" id="filterText_0">
<input class="form-control" type="radio" name="inlineRadioOptions" id="andRadio_0" value="AND">
<label for="andRadio">AND</label>
<input class="form-control" type="radio" name="inlineRadioOptions" id="orRadio_0" value="OR">
<label for="orRadio">OR</label>
<button id="addBtn_0" type="button" class="btn btn-secondary">Add</button>
<button id="cancelBtn_0" type="button" class="btn btn-secondary">Cancel</button>
</form>
</div>
I tried with clone and trying to retrieve values from the input elements inside div,but I am facing issue with getting values and generating ids.
$('#addBtn_' + count).click(function () {
var newel = $("#filterfields").clone(true);
var jsonData = [];
$(newel).insertAfter("#filterfields");
var index;
$("#filterfields").find('input:text,select').each(function () {
let str = '{"' + this.id + '":' + (this.value + '}';
jsonData.push(str);
}).end()
newel.find(':input').each(function () {
var oldId = $(this).attr("id");
var split = oldId.toString().split('_');
index = parseInt(split[1]);
var curId = split[0];
var newId = curId + "_" + index + 1;
this.id = newId;
}).end()
jsonData.push('"filterClause":' + $('input[name="inlineRadioOptions"]:checked').val() + '"');
});
Please suggest me if there is better way to achieve the similar function as I am not able to get values of input elements of current row.
Consider the following code.
$(function() {
function formToJson(fObj) {
var j = [];
fObj.children().not("button, label").each(function(i, el) {
// Will avoid buttons and labels
if (!($(el).is(":radio") && !$(el).is(":checked"))) {
// Will avoid unselected Radio Buttons
var d = {
nodeName: $(el).prop("nodeName"),
props: {
class: $(el).attr("class"),
id: $(el).attr("id")
},
value: $(el).val(),
name: $(el).attr("name")
};
if (d.nodeName != "SELECT") {
d.props.type = $(el).attr("type");
}
j.push(d);
}
});
return j;
}
$("[id^='addBtn']").click(function() {
var jsonData = formToJson($("#filterFieldsForm"));
console.log(jsonData);
var filter = "Filter: ";
$.each(jsonData, function(key, item) {
if (key != 2) {
filter += item.value + " ";
} else {
filter += "'" + item.value + "' ";
}
});
$("<div>", {
class: "filter-results"
}).html(filter).appendTo("body");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filterfields" class="row collapse">
<form class="form-inline" id="filterFieldsForm">
<select class="form-control" name="TypeCode" id="filterType_0">
<option value="Type">Type</option>
<option value="SubmittedBy">SubmittedBy</option>
<option value="Date">Date</option>
<option value="Description">Description</option>
</select>
<select class="form-control" name="Filter" id="filterCondition_0">
<option value="Equal">Equal</option>
<option value="StartsWith">Starts With</option>
<option value="EndsWith">Ends With</option>
<option value="Greaterthan">Greater Than</option>
<option value="Lessthan">Less Than</option>
</select>
<input type="text" name="caseFilterText" class="form-control" id="filterText_0">
<input class="form-control" type="radio" name="inlineRadioOptions" id="andRadio_0" value="AND">
<label for="andRadio">AND</label>
<input class="form-control" type="radio" name="inlineRadioOptions" id="orRadio_0" value="OR">
<label for="orRadio">OR</label>
<button id="addBtn_0" type="button" class="btn btn-secondary">Add</button>
<button id="cancelBtn_0" type="button" class="btn btn-secondary">Cancel</button>
</form>
</div>
As you are iterating over elements, it is best to use .each(). Using the proper selector, we can target just the form elements you want. You then want a condition to ensure that if a Radio Button is selected (or checked) that it is included and others are excluded.
The result is an Array of Objects that can be used to rebuild the HTML Structure or just build new copies.
Update
$(function() {
function formToJson(fObj) {
var j = [];
fObj.each(function(i, el) {
var d = {};
$("select, input", el).each(function(k, v) {
if (!($(v).is(":radio") && !$(v).is(":checked"))) {
d[$(v).attr("id")] = $(v).val();
}
});
j.push(d);
});
return j;
}
$("[id^='addBtn']").click(function() {
var jsonData = formToJson($("#filterFieldsForm"));
console.log(jsonData);
var filter = "Filter: ";
$.each(jsonData, function(key, item) {
if (key != 2) {
filter += item.value + " ";
} else {
filter += "'" + item.value + "' ";
}
});
$("<div>", {
class: "filter-results"
}).html(filter).appendTo("body");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filterfields" class="row collapse">
<form class="form-inline" id="filterFieldsForm">
<select class="form-control" name="TypeCode" id="filterType_0">
<option value="Type">Type</option>
<option value="SubmittedBy">SubmittedBy</option>
<option value="Date">Date</option>
<option value="Description">Description</option>
</select>
<select class="form-control" name="Filter" id="filterCondition_0">
<option value="Equal">Equal</option>
<option value="StartsWith">Starts With</option>
<option value="EndsWith">Ends With</option>
<option value="Greaterthan">Greater Than</option>
<option value="Lessthan">Less Than</option>
</select>
<input type="text" name="caseFilterText" class="form-control" id="filterText_0">
<input class="form-control" type="radio" name="inlineRadioOptions" id="andRadio_0" value="AND">
<label for="andRadio">AND</label>
<input class="form-control" type="radio" name="inlineRadioOptions" id="orRadio_0" value="OR">
<label for="orRadio">OR</label>
<button id="addBtn_0" type="button" class="btn btn-secondary">Add</button>
<button id="cancelBtn_0" type="button" class="btn btn-secondary">Cancel</button>
</form>
</div>
This will target the various rows and for each row, it will gather all the Select and Inputs.
Hello i have a dropdown which is fetching data from a database. Forget about the database, i have a text box in front of the dropdown select. The logic is if i type in the text the value should be selected automatically from the dropdown if the value typed in the text not matched with the values in the dropdown, then the user can select the dropdown. Any help would be much appreciated.
Here is my html code!
<div class="form-group">
<label class="col-sm-4 control-label">Scheme**</label>
<div class="col-sm-4">
<select class="form-control" name="scheme" id="scheme">
<?php
for ($column = 'A'; $column <= $lastcol; $column++) {
echo '<option value="' . $column . '">' . $worksheet->getCell($column . '1')->getValue() . '</option>';
}
?>
</select>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="txt_scheme" name="txt_scheme" placeholder="Or Type here">
</div>
</div>
In dropdown i m getting these values
QC code
Analyte
Assay Value
Assigned Value
STANDARDDEVIATION
ACCEPTABLEMIN
ACCEPTABLEMAX
Sample ID
Date
Try this code, then you can modified with your need.
$("#product").on("change keyup paste", function(){
var valuefound ='';
$("#platformid option").each(function(i){
if($(this).text().substring(0, 2).toLowerCase()==$("#product").val().substring(0, 2).toLowerCase() ){ valuefound = $(this).val(); } });
$('option:selected', 'select[name="platformid"]').removeAttr('selected'); $('#platformid option[value="' + valuefound + '"]').prop('selected', true); })
Working fiddle here https://jsfiddle.net/8xfqeb9y/
<label for="">Enter Value</label>
<input type="text" class="textVal">
<select name="" id="listItems">
</select>
var listItems = ["One","Two","Three","Four","Five","Six"];
for (var i = 0; i < listItems.length; i++) {
console.log(listItems[i]);
$("#listItems").append("<option>" + listItems[i] + "</option>")
}
$(".textVal").on("focusout",function(){
for (var i = 0; i < listItems.length; i++) {
console.log(listItems[i]);
if(listItems[i] == $(this).val()) {
$("#listItems").val($(this).val());
}
}
})
check now that values and texts are different and you can even select now by typing one
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#txtselect").keyup(function(){
$("#selbox > option").each(function() {
if($(this).text()==$("#txtselect").val())
{
$(this).attr('selected', 'selected');
}
});
});
});
</script>
</head>
<body>
<select id="selbox">
<option val="select">select</option>
<option val="123">one</option>
<option val="abc">two</option>
<option val="23sfd">three</option>
<option val="27345">four</option>
</select>
<input type="text" id="txtselect"/>
</body>
</html>
check this you will get solution run snippet and type "one"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#txtselect").keyup(function(){
$("#selbox").val($("#txtselect").val());
});
});
</script>
</head>
<body>
<select id="selbox">
<option val="select">select</option>
<option val="one">one</option>
<option val="two">two</option>
<option val="three">three</option>
<option val="four">four</option>
</select>
<input type="text" id="txtselect"/>
</body>
</html>
Try this
<script type="text/javascript">
function getselected(elem)
{
var textvalue = $(elem).val();
if(textvalue != '')
{
$('select').removeAttr('disabled');
$('select option').removeAttr('selected');
$('select option').each(function(){
if ($(this).html().indexOf(textvalue) > -1)
{
$('select').val($(this).attr('value'));
}
});
}
else
{
$('select').val('');
$('select').attr('disabled','disabled');
}
}
</script>
<input type="text" name="name" value="" onkeydown="getselected(this)">
<select disabled="disabled">
<option value="">Select</option>
<option value="1">QC code</option>
<option value="2">Analyte</option>
<option value="3">Assay Value</option>
<option value="4">Assigned Value</option>
<option value="5">STANDARDDEVIATION</option>
<option value="6">ACCEPTABLEMIN</option>
<option value="7">ACCEPTABLEMAX</option>
<option value="8">Sample ID</option>
<option value="9">Date</option>
</select>
I want to make dynamic form field. for instance, depends on the selection of form field, I want to show hidden field or hide showed block.
For example, if I selected first field with 'high school', then show 'Marital Status' field. This field is hidden by default.
See the example code here
Thank you so much!!
Here is HTML
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Check your eligibility</h2>
<h3 class="fs-subtitle">About yourself</h3>
<label for="educationLevel" tabindex="1">Education:<select name="educationLevel" class="pie" id="educationLevel" onchange="myfunction();">
<option value="0">Select an option</option>
<option value="1">High School</option>
<option value="2">College</option>
<option value="3">Grad School</option>
</select></label>
<label for="quiz-applicantCountry" tabindex="1" id="yourself">YOUR COUNTRY OF BIRTH:<select name="applicantCountry" id="your-applicantCountry" class="pie" onchange="myfunction();">
<option value="0">Select a Country</option>
<option value="54">Afghanistan</option>
<option value="93">Albania</option>
...
<option value="52">Zambia</option>
<option value="53">Zimbabwe</option>
</select></label>
<label for="maritalStatus" tabindex="2" id="marital">Marital Status:<select name="maritalStatus" class="pie" id="maritalStatus" onchange="myfunction();">
<option value="0">select</option>
<option value="1">YES</option>
<option value="2">NO</option>
</select></label>
<label for="quiz-applicantCountry" tabindex="1" id="spouse">YOUR SPOUSE COUNTRY OF BIRTH:<select name="applicantCountry" id="spouse-applicantCountry" class="pie" onchange="myfunction();">
<option value="0">Select a Country</option>
<option value="54">Afghanistan</option>
...
<option value="52">Zambia</option>
<option value="53">Zimbabwe</option>
</select></label>
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
</form>
Here is Javascript
function myfunction(){
var birthSelectedCountry = $("select#your-applicantCountry option:selected").val();
// console.log(birthSelectedCountry);
var country = "-" + birthSelectedCountry + "-";
var eligibleCountries = "-61-65-81-86-82-91-266-223-95-102-175-104-106-112-120-140-146-156-163-221-190-177-181-183-187-261-262-189-194-56-182-38-279-287-267-115-123-280-288-286-137-281-289-282-283-149-270-284-285-1000-";
var birthSpouseSelectedCountry = $("select#your-applicantCountry option:selected").val();
// console.log(birthSpouseSelectedCountry);
var spouseCountry = "-" + birthSpouseSelectedCountry + "-";
var eligibleSpouseCountries = "-61-65-81-86-82-91-266-223-95-102-175-104-106-112-120-140-146-156-163-221-190-177-181-183-187-261-262-189-194-56-182-38-279-287-267-115-123-280-288-286-137-281-289-282-283-149-270-284-285-1000-";
var maritalStatus = $("select#maritalStatus option:selected").val();
// console.log(maritalStatus);
var marital = "-" + maritalStatus + "-";
var eligibleMarital = "-1-2-";
var educationLevel = $("#educationLevel option:selected").val();
var education = "-" + educationLevel + "-";
var eligibleEducationLevel = "-2-3-";
console.log(education);
console.log(marital);
console.log(country);
console.log(eligibleEducationLevel.indexOf(education));
console.log(eligibleMarital.indexOf(marital));
console.log(eligibleCountries.indexOf(country));
if( eligibleEducationLevel.indexOf(education) < 0 && eligibleCountries.indexOf(country) < 0 ) {
console.log("Are you married?");
// $('#marital').fadeIn();
$('#marital').css('display', "block");
}
Try this:
JAVASCRIPT
if ($("#educationLevel").val() == "1"){
$("#maritalStatus").show();
} else {
// Do something else..
}
This is if I understood the question correctly.
In your document.ready() event hide all the controls by referencing them by their ids. The document.ready() function is used to initialize the entire behaviour of the entire page.
$(document.ready(function(){
//hide the maritalStatus dropdown initially at pageload.
$('#maritalStatus').hide();
$('#spouse-applicantCountry').hide();
$('#maritalStatus').val(0);
$('#spouse-applicantCountry').val(0);
//This the onchange event of the select
$('#educationLevel').on('change', function() {
$('#maritalStatus').show();
//Put your conditions here
if($('#maritalStatus').val() == "1"){
$('#spouse-applicantCountry').show();
}
});
}));
The dropdown onChange functions wont work properly as expected as the select control is often rendered before the function is defined.
Hope this helps !
Cheers !
I have 3 select fields, and the combined value of these I would like to use as a extra part of an url.
Here's the HTML code:
<select name="cos" id="cos" size="5">
<option value="/squad">Squad</option>
<option value="/class">Class</option>
</select>
<select name="color" id="color" size="5">
<option value="/purpleblack">PurpleBlack</option>
<option value="/redblack">RedBlack</option>
<option value="/aquablack">AquaBlack</option>
</select>
<select name="year" id="year" size="5">
<option value="/1984">1984</option>
<option value="/1985">1985</option>
<option value="/1986">1986</option>
</select>
<br/><br/>
<div id="output"></div>
And the JavaScript:
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
var id = $(this).parent().attr('name');
str += $(this).attr('value');
});
$("div#output").text(str);
})
.trigger('change');
https://jsfiddle.net/eZKUU/264/
Right now it's working.. after I select an option in all 3 of the selectfields I get an output like /squad/redblack/1985.
I would like to use this output in an url, so it would look like:
mysite.com/squad/redblack/1985
Is there an easy way of doing this? And also.. To only get the link visible after all three of the selectfields have an option selected?
You can use the following. Add an a element and keep it hidden until is completed. Update a element href attribute with selected options:
$("select").change(function() {
var str = "";
$("select option:selected").each(function() {
var id = $(this).parent().attr('name');
str += $(this).attr('value');
//update href with selected values
$("#mySite").attr("href", "mysite.com/" + str);
});
//keep anchor element hidden until all three options is selected
$("#mySite").toggle($("#cos").find("option:selected").length > 0 && $("#color").find("option:selected").length > 0 && $("#year").find("option:selected").length > 0);
$("div#output").text(str);
})
.trigger('change');
#mySite {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="cos" id="cos" size="5">
<option value="/squad">Squad</option>
<option value="/class">Class</option>
</select>
<select name="color" id="color" size="5">
<option value="/purpleblack">PurpleBlack</option>
<option value="/redblack">RedBlack</option>
<option value="/aquablack">AquaBlack</option>
</select>
<select name="year" id="year" size="5">
<option value="/1984">1984</option>
<option value="/1985">1985</option>
<option value="/1986">1986</option>
</select>
<br/>
<br/>
<div id="output"></div>
<a id="mySite" href="#">Redirect Link</a>
You can check to see if the number of selected options is the same amount as the number of select elements.
var selectedAllLength = $("select").length;
$("select").change(function () {
var str = location.origin;
var selected = $("select option:selected");
var selectedCount = selected.length;
if(selectedCount == selectedAllLength) {
selected.each(
function () {
str += $(this).attr('value');
}
);
$("#output").html('<a href=' + str + '>The link is here</a>');
}
})
.trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="cos" id="cos" size="5">
<option value="/squad">Squad</option>
<option value="/class">Class</option>
</select>
<select name="color" id="color" size="5">
<option value="/purpleblack">PurpleBlack</option>
<option value="/redblack">RedBlack</option>
<option value="/aquablack">AquaBlack</option>
</select>
<select name="year" id="year" size="5">
<option value="/1984">1984</option>
<option value="/1985">1985</option>
<option value="/1986">1986</option>
</select>
<br/><br/>
<div id="output"></div>
To only get the link after all three have been selected, simply use an if statement to only generate and display the link if 3 options are selected. To make it a URL, just append the path you get to the base URL. Something like:
$("select").change(function () {
var str = "";
if(#("select option:selected").length === 3){
$("select option:selected").each(function () {
var id = $(this).parent().attr('name');
str += $(this).attr('value');
});
$("div#output").text("mysite.com" + str);
// Or, if you want a clickable link and not just a URL:
// $("div#output").append($("<a>").attr({href: "mysite.com" + str}).append("Click me"));
}
})
.trigger('change');