We Keep Coding

dropdown select not being part upon the process of cloning

Cloning code works it's just that the dropdown select is not being part of the cloning process.
$("input.tr_clone_add").live('click', function() {
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find('.form-control js-example-basic-single').val('');
$tr.after($clone);
});
<table>
<tr class="tr_clone">
<td>
<input type="button" name="add" value="clone row" class="tr_clone_add" /><br><br>
<select name="animal" id="number">
<option value="cow">cow</option>
<option value="horse">horse</option>
<option value="dog">dog</option>
<option value="cat">cat</option>
</select>
<select name="vehicle" id="letter">
<option value="car">car</option>
<option value="ship">ship</option>
<option value="plane">plane</option>
</select>
<input name="remarks" type="text">
<br>
<hr>
</td>
</tr>
</table>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
What I am trying to do is, also pass the value of dropdown select of row to be cloned upon the process of cloning the row.

live is deprecated so update your jQuery library.
For your question:
First of all find and get selected option and add attribute selected to selected option.
To get events of dynamic created elements , use event delegation.
Example:
$(document).on("change", "select", function() {
var val = $(this).val();
$("option", this).removeAttr("selected").filter(function() {
return $(this).attr("value") == val;
}).first().attr("selected", "selected");
});
$('body').on('click', 'input.tr_clone_add', function() {
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find('.form-control js-example-basic-single').val('');
$tr.after($clone);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="tr_clone">
<td>
<input type="button" name="add" value="clone row" class="tr_clone_add" /><br><br>
<select name="animal" id="number">
<option value="cow">cow</option>
<option value="horse">horse</option>
<option value="dog">dog</option>
<option value="cat">cat</option>
</select>
<select name="vehicle" id="letter">
<option value="car">car</option>
<option value="ship">ship</option>
<option value="plane">plane</option>
</select>
<input name="remarks" type="text">
<br>
<hr>
</td>
</tr>
</table>
</body>

Show/hide select options based on value of another select using javascript/jquery?

I want to select and get results but options should be invisible so when I select name they show up like that
# SELECT FROM
<select>
<option value="n">name/option>
<option value="a">age</option>
<option value="c">country</option>
</select>
# GET
<select>
<!-- # IF YOU SELECT NAME THESE SHOW UP -->
<option value="1">john</option>
<option value="2">dan</option>
</select>
<select>
<!-- IF YOU SELECT AGE THESE SHOW UP -->
<option value="1">23</option>
<option value="2">24</option>
</select>
<select>
<!-- IF YOU SELECT COUNTRY THESE SHOW UP -->
<option value="1">uk</option>
<option value="2">usa</option>
</select>
but select tag should not be invisible. coz the HTML page cant be blank I want to make options only to be invisible

When main <select> is changed, get value of selected option and using it, select relevant select tag and show it.
$(".main").change(function(){
$("."+$(this).val()).show().siblings().not(".main").hide()
}).trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
# SELECT FROM
<select class="main">
<option value="n">name</option>
<option value="a">age</option>
<option value="c">country</option>
</select>
<br>
<select class="n">
# IF YOU SELECT NAME THESE SHOW UP
<option value="1">john</option>
<option value="2">dan</option>
</select>
<br>
<select class="a">
# IF YOU SELECT AGE THESE SHOW UP
<option value="1">23</option>
<option value="2">24</option>
</select>
<br>
<select class="c">
IF YOU SELECT COUNTRY THESE SHOW UP
<option value="1">uk</option>
<option value="2">usa</option>
</select>

HTML:
<form id="formname" name="formname" method="post" action="submitform.asp" >
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Category1 :</td>
<td width="59%" align="left" valign="middle">
<select name="category1" id="category1">
<option value="">Select Category1</option>
<option value="n">name</option>
<option value="a">age</option>
<option value="c">country</option>
</select>
</td>
</tr>
<tr>
<td align="right" valign="middle">Category2 :</td>
<td align="left" valign="middle">
<select disabled="disabled" class="subcat" id="category2" name="category2">
<option value>Select Category2</option>
<!-- Home Ware -->
<optgroup data-rel="n">
<option value="1">john</option>
<option value="2">dan</option>
</optgroup>
<!-- Education -->
<optgroup data-rel="a">
<option value="1">23</option>
<option value="2">24</option>
</optgroup>
<!-- Books -->
<optgroup data-rel="c">
<option value="1">uk</option>
<option value="2">usa</option>
</optgroup>
</select>
</td>
</tr>
<tr>
</tr>
</table>
</form>
JS:
$(function(){
var $cat = $("#category1"),
$subcat = $(".subcat");
var optgroups = {};
$subcat.each(function(i,v){
var $e = $(v);
var _id = $e.attr("id");
optgroups[_id] = {};
$e.find("optgroup").each(function(){
var _r = $(this).data("rel");
$(this).find("option").addClass("is-dyn");
optgroups[_id][_r] = $(this).html();
});
});
$subcat.find("optgroup").remove();
var _lastRel;
$cat.on("change",function(){
var _rel = $(this).val();
if(_lastRel === _rel) return true;
_lastRel = _rel;
$subcat.find("option").attr("style","");
$subcat.val("");
$subcat.find(".is-dyn").remove();
if(!_rel) return $subcat.prop("disabled",true);
$subcat.each(function(){
var $el = $(this);
var _id = $el.attr("id");
$el.append(optgroups[_id][_rel]);
});
$subcat.prop("disabled",false);
});
});
DEMO:
Fiddler

Just give your select tags the appropriate ids and hide/show them in the change event of the first select.
You can hide the selects in your html by using the hidden attribute.
$('#dropdown').on('change',function(){
$('select:not(#dropdown)').hide(); //hides all selects except the one with id "dropdown"
$("#" + $(this).val()).show(); //shows the select where id = #dropdown's value ("n"/"a"/"c")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
<option value="n">name</option>
<option value="a">age</option>
<option value="c">country</option>
</select>
<select id="n">
<option value="1">john</option>
<option value="2">dan</option>
</select>
<select id="a" hidden>
<option value="1">23</option>
<option value="2">24</option>
</select>
<select id="c" hidden>
<option value="1">uk</option>
<option value="2">usa</option>
</select>

Using jQuery to build on existing functionality to code to also check if any input boxes have values

I really need your help here. Just a heads up that I am newcomer to the jQuery library.
That out of the way, I would like to get some help to so as to build onto my existing code (the codes existing purpose in my post is to check and see if any of the select boxes have any selected option values, attached to an on change event, so if any of the select boxes have any selected option values then enable the search button, if not, then just keep it nicely disabled.
Now, here's where it gets really tricky for me, how can the existing code be modified so as to also check (in parellel to the code below) to check and see if any input boxes also have any input values,
So the expected outcome for a typical scenario is this, if the user has made a selection in any of the select boxes or has typed in any text in the form, then enable the search button, if the form contains no selected options and all of the input boxes are empty, then disable the #search button.
Here's both the HTML Markup and Code in question:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jq/jquery.js"></script>
<script type="text/javascript">
window.onload = function() {
$('#myform').on('change', function() {
var form = $(this);
form.find('#search').prop('disabled', form.find('select option:selected').filter(function() {
return this.value.length;
}).length === 0)
}).change();
}
</script>
</head>
<body>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br><br>
Vegetable
<input type="input" id="veggie">
<br><br>
Number
<input type="input" id="number">
<br><br>
<input type="button" value="search" id="search" disabled>
</form>
</body>
</html>

Have generalized function to test all the input;
Consider $(':input:not([type="button"])') to select all the inputs excluding button
window.onload = function() {
var validateForm = function() {
return $(':input:not([type="button"])').filter(function() {
return this.value !== '';
}).length;
}
$('#myform').on('change keyup', ':input', function() {
$('#search').prop('disabled', !validateForm());
}).change();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br>
<br>Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br>
<br>Vegetable
<input type="input" id="veggie">
<br>
<br>Number
<input type="input" id="number">
<br>
<br>
<input type="button" value="search" id="search" disabled>
</form>

Placeholder doesn't update option value

$(function() {
var myOption= $("#mySelect option:selected").val();
$("#search").attr("placeholder", myOption);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="search" id="search">
</form>
<select id="mySelect">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
It would be a easy solution for you but i just stuck on this.
Why placeholder doesn't update option value?

As written, your code only runs once after the page loads. To make it run when the select is changed, add an event listener to re-run your code with the new value.
$(function() {
function setPlaceholder() {
var myOption= $("#mySelect option:selected").val();
$("#search").attr("placeholder", myOption);
}
setPlaceholder();
$("#mySelect").change(setPlaceholder);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="search" id="search">
</form>
<select id="mySelect">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>

onclick using Button for select option

I would like to perform a search based on the chosen value from select dropdown list but I am not sure how to use javascript to perform that search. Below is my code.
<form name="countryOpt">
<select name="region" id="region" onchange="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="all">
<select name="country" id="country" style="display: none;">
<option value="http://www.google.com.my">Google</option>
</select>
<select name="country" id="state" style="display: none;">
<option value="http://www.yahoo.com">Yahoo</option>
</select>
<select name="country" id="city" style="display: none;">
<option value="http://www.facebook.com">Facebook</option>
</select>
</div>
<input type="button" name="go" value="Search" onclick="window.location=document.countryOpt.country.options[document.countryOpt.country.selectedIndex].value" />
</form>
<script type="text/javascript">
$(window).load(function(){
$("select").change(function () {
$("select option:selected").each(function () {
if($(this).val() == "1") {
$('#all select').css('display','none');
$('#country').css('display','block');
} else if($(this).val() == "2") {
$('#all select').css('display','none');
$('#state').css('display','block');
} else if($(this).val() == "3") {
$('#all select').css('display','none');
$('#city').css('display','block');
}
});
});
});
</script>

change your javascript code to this and try :
$(window).load(function()
{
$("#region").change(function ()
{
$('select[name=country]').css('display','none');
if($(this).val() == "1")
$('#country').css('display','block');
if($(this).val() == "2")
$('#state').css('display','block');
if($(this).val() == "3")
$('#city').css('display','block');
});
});
JSFiddle

Maybe you are looking for something like this?
<form name="countryOpt">
<select name="region" id="region">
<option value="http://www.google.com.my">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.facebook.com">Facebook</option>
</select>
<input type="button" name="go" id="go" value="Search"/>
</form>
<script>
$(document).ready(function(){
//Triggered by clicking the selectbox
$("#region").change(function () {
//window.location.href=$('#region').val();
alert($('#region').val());
});
//Triggered by clicking the button
$("#go").click(function () {
//window.location.href=$('#region').val();
alert($('#region').val());
});
});
</script>
jsbin