Creating dynamic button with Jquery - php

Question

Hey guys I'm trying to create a dynamic button from a drop down list. for example, in the HTML code below...
function dropdownbutton(){
var make = document.getElementById("makelist");
var answer = make.options[make.selectedIndex].value;
alert("answer")
}
<div class="make">
<label>Make</label>
<select name="make" id="makelist" onchange="getId(this.value);">
<option value="">Select Make</option>
<option value="">1</option>
</select>
</div>
<div id="model">
<label>Model</label>
<select name="model" id="modellist" onchange="getId2(this.value);">
<option value="">Select Model</option>
<option value="">1</option>
<option value="">2</option>
</select>
</div>
<div id="year">
<label>Year</label>
<select name="year" id="yearlist" onchange="getId3(this.value);">
<option value="">Select Year</option>
<option value="">1</option>
<option value="">2</option>
</select>
</div>
<button id="dropdownbutton" onclick="dropdownbutton()" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-3d vc_btn3-color-success">Dropdown</button>
I'm open to trying it in different languages but I would prefer to do it in php, I simply don't know how to get the values from each dropdown.

Answer 1

I have taken help of Jquery here, inside the dropdownbutton() function i call all the select box element.
And using .each function extracted the value selected value of dropdowns.
i check those value if not empty then created a button inside element having Id #append_new_button
Please check the below code it might solve your issue
Thanks
function dropdownbutton() {
jQuery('#append_new_button').html('');
jQuery('select').each(function(){
var select_value = jQuery(this).val();
var select_label = jQuery("#"+jQuery(this).attr('id')+" option[value='"+select_value+"']"). text();
if(select_value != ''){
jQuery('#append_new_button').append('<input type="button" id="'+select_value+'" value="'+select_label+'"></button>')
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="make">
<label>Make</label>
<select name="make" id="makelist">
<option value="">Select Make</option>
<option value="make_1">Make 1</option>
<option value="make_2">Make 2</option>
</select>
</div>
<div id="model">
<label>Model</label>
<select name="model" id="modellist" >
<option value="">Select Model</option>
<option value="model_1">Model 1</option>
<option value="model_2">Model 2</option>
</select>
</div>
<div id="year">
<label>Year</label>
<select name="year" id="yearlist" >
<option value="">Select Year</option>
<option value="year_1">year 1</option>
<option value="year_2">year 2</option>
</select>
</div>
<button id="dropdownbutton" onclick="dropdownbutton()" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-3d vc_btn3-color-success">Dropdown</button>
<div id="append_new_button">
</div>

Answer 2

I updated that code to find the values for each drop down
function dropdownbutton(val){
var make = document.getElementById("makelist");
var answer = make.options[make.selectedIndex].value;
var model = document.getElementById("modellist");
var answer2 = model.options[model.selectedIndex].value;
var year = document.getElementById("yearlist");
var answer3 = year.options[year.selectedIndex].value;
alert(answer2);
}
Now i need to figure out how to pass these variables to a link for example, mydomain.com/answer/answer2/answer3

Answer 3

i think that this code is more dynamic.
$("button").click(function() { // if button is clicked
var arr = $('select').map(function() { // run through all selects and get value
return this.value
}).get();
var url = "http://exp.com"; // base for the url
arr.forEach(function(item) {
url = url + '/' + item; // append all options to the base url
});
window.location.href(url); // redirect to base url + all options
});
Don't forget to add value to your options. <option value="1">1</option>
Please look at jsfiddle for a working example