The show or hide not working. the div keeps on showing, even if i select an option which should hide it.
However if i console log, it gives me respective show/hide output.
The following are sample code:
$('#categoryt').change(function() {
selection = $(this).val();
console.log(selection);
if (selection == "2") {
console.log("show");
$('#Subjectd').show();
} else {
console.log("hide");
$('#Subjectd').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="insert.php">
<div class="form-group" id="formdiv">
<label for="Category">Category</label>
<select class="custom-select" id="categoryt">
<option selected>Choose Role</option>
<option value="1">Student</option>
<option value="2">Teacher</option>
<option value="3">Animation Designer</option>
<option value="4">Content Verifier</option>
<option value="5">Admin</option>
</select>
</div>
<div class="form-group" id="formdiv">
<label for="Name">Name</label>
<input type="text" id="Name" name="Name" placeholder="Name" class="form-control" />
</div>
<div class="form-group" id="formdiv" id="Schoold">
<label for="School">School</label>
<input type="text" id="School" name="School" placeholder="School" class="form-control" />
</div>
<div class="form-group" id="formdiv" id="Subjectd">
<label for="Subject">Subject</label>
<input type="text" id="Subject" name="Subject" placeholder="Subject" class="form-control" />
</div>
<div class="form-group" id="formdiv" id="Classd">
<label for="Class">Class</label>
<input type="text" id="Class" name="Class" placeholder="Class" class="form-control" />
</div>
You have two id's in your element
<div class="form-group" id = "formdiv" id = "Subjectd">
change to
<div class="form-group" id = "Subjectd">
Please remember that your element can only have one ID and that your ID must be unique in the entire page. Meaning you should never have two elements that share the same ID. Class, on the other hand, can be shared by multiple elements and you can have multiple classes on a single element.
i.e
<div class="form-group class_two class_three">
Related
I have a form like below
<form>
<div class="6 op" style="display: none;">
<div class="form-group">Service</label>
<select class="form-control" id="exampleFormControlSelect1" required>
<option></option>
<option>Fiber</option>
<option>Hotspot</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Capacity</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="example: 1" required>
<select class="form-control" id="exampleFormControlSelect1" required>
<option>Mbps</option>
<option>Gbps</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Notes</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<input type="submit">
</div>
</form>
In the code above, required is in service and capacity. I want to know how to add required to notes field automatically only when I choose Hotspot option in service field.
Do you know how to do that ?
Thank you
You can add onchange event handler to select option and as a param pass the value of the selected option. In this case when the value is hotspot you can use setAttribute to add the attribute required to the textarea else set it to false or remove it using removeAttribute. Also id of dom elements need to be unique
let txtArea = document.getElementById('exampleFormControlTextarea1');
function changeService(val) {
if (val.toLowerCase() === 'hotspot') {
txtArea.setAttribute('required', true)
} else {
txtArea.setAttribute('required', false)
}
}
<form>
<div class="6 op" style="">
<div class="form-group"><label for='exampleFormControlSelect1'>Service</label>
<select onchange='changeService(this.value)' class="form-control" id="exampleFormControlSelect1" required>
<option></option>
<option>Fiber</option>
<option>Hotspot</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlInput2">Capacity</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="example: 1" required>
<select class="form-control" id="exampleFormControlSelect2" required>
<option>Mbps</option>
<option>Gbps</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Notes</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<input type="submit">
</div>
</form>
Check this simple example below ,
using jquery , if someone select specific role , code toggle class and toggle REQUIRED properties on chosen element
$('select#role').change(function(){
let role = $(this).children("option:selected").val();
if (role == 0 ){
$('.detailed').removeClass("detailed");
$('#employee').prop('required',true);
}
else{
$('#staff').addClass("detailed");
$('#employee').prop('required',false);
}
}); // close $('select#role').change(function(){
let el = document.querySelector("#exampleFormControlSelect1");
el.addEventListener("change",(e)=>{
if(el.options[el.selectedIndex].value == "Hotspot" ) {
document.querySelector("#exampleFormControlTextarea1").setAttribute("required","");
} else {
document.querySelector("#exampleFormControlTextarea1").removeAttribute("required");
}
});
<form>
<div class="6 op" style="">
<div class="form-group">Service</label>
<select class="form-control" id="exampleFormControlSelect1" required>
<option></option>
<option>Fiber</option>
<option>Hotspot</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Capacity</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="example: 1" required>
<select class="form-control" id="exampleFormControlSelect1" required>
<option>Mbps</option>
<option>Gbps</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Notes</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<input type="submit">
</div>
</form>
First of all, remove the display:none property from first div. Then check the codes above.
$('#serviceToggle').on('change', function () {
var data = $(this).val();
if (data == 'hotspot') {
$('#notes').prop('required', true);
} else {
$('#notes').prop('required', false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label for="serviceToggle">Service</label>
<select class="form-control" id="serviceToggle" required>
<option></option>
<option value="fiber">Fiber</option>
<option value="hotspot">Hotspot</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Capacity</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="example: 1">
<select class="form-control" id="exampleFormControlSelect1" required>
<option>Mbps</option>
<option>Gbps</option>
</select>
</div>
<div class="form-group">
<label for="notes">Notes</label>
<textarea class="form-control" id="notes" rows="3"></textarea>
</div>
<input type="submit" value="Submit">
</form>
You can achieve this using jQuery. You need to set the field to required on the onChange event of dropdown.
// Perform some code on the change event of a dropdown
$("#exampleFormControlSelect1").change(function () {
var selected = $(this).children("option:selected").val();
// Get selected value and save it in selected variable
console.log(selected);
if(selected == "Fiber"){
//check the selected value and set the field to required
console.log('i am here');
// Set capacity input to required if value if Fiber
// $("#capacity").attr('required',true);
// Set Notes field to required if value if Fiber
$("#exampleFormControlTextarea1").attr('required',true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="6 op">
<div class="form-group">Service</label>
<select class="form-control" id="exampleFormControlSelect1" required>
<option></option>
<option>Fiber</option>
<option>Hotspot</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Capacity</label>
<input type="text" class="form-control" id="capacity" placeholder="example: 1">
<select class="form-control" id="exampleFormControlSelect1">
<option>Mbps</option>
<option>Gbps</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Notes</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<input type="submit">
</div>
</form>
In the above example, the Notes field will become required, if you select Fiber in Service Dropdown.
I wrote some HTML form where the form should alert when nothing is submitted. I started with creating this for the names. As expected, the message 'You must provide your full name!' shows when no name is entered. However, the message also shows up when the names are actually entered…
{% extends "layout.html" %}
{% block main %}
<!-- http://getbootstrap.com/docs/4.1/content/typography/ -->
<h1 class="mb-3">Form</h1>
<!-- http://getbootstrap.com/docs/4.1/components/forms/ -->
<form action="/form" method="post" id="form_id">
<div class="form-row names">
<div class="form-group col-md-3 name1">
<label for="inputFirstname">First name</label>
<input type="name" autofocus class="form-control" id="inputFirstname" placeholder="First name">
</div>
<div class="form-group col-md-3 name2">
<label for="inputLastname">Last name</label>
<input type="name" class="form-control" id="inputLastname" placeholder="Last name">
</div>
</div>
<div class="form-row clubs">
<div class="form-group col-md-3">
<label cfor="inlineFormCustomSelect">Club preference</label>
<select class="custom-select" id="inlineFormCustomSelect">
<option disabled selected value> -- select an option -- </option>
<option value="1">PSV</option>
<option value="2">Ajax</option>
<option value="3">Feyenoord</option>
<option value="4">De Graafschap</option>
<option value="5">RKVV Bergeijk 2</option>
</select>
<div class="invalid-feedback">Please choose one option</div>
</div>
</div>
<div class="form-group">
<label for="PFoot">Preferred foot</label>
<label class="form-check-label">
<input type="radio" id="PFoot" name="algorithm" value="right">
Right
</label>
<label class="form-check-label">
<input type="radio" id="PFoot" name="algorithm" value="left">
Left
</label>
<label class="form-check-label">
<input type="radio" id="PFoot" name="algorithm" value="zweipotig">
Zweipotig
</label>
</div>
<!-- http://getbootstrap.com/docs/4.1/components/buttons/ -->
<button class="btn btn-primary" type="submit">Submit</button>
</form>
<script>
document.querySelector('form').onsubmit = function() {
if (!document.querySelector('.name1').value) {
alert('You must provide your full name!');
return false;
}
return true;
}
</script>
{% endblock %}
As expected, the message 'You must provide your full name!' shows when no name is entered. However, the message also shows up when the names are actually entered…
You are using the wrong selector (.name1) which refers a div element, not the input you are thinking. Try #inputFirstname
document.querySelector('form').onsubmit = function() {
if (!document.querySelector('#inputFirstname').value) {
alert('You must provide your full name!');
return false;
}
else if(!document.querySelector('[name=algorithm]:checked')){
alert('You must provide Preferred foot!');
return false;
}
return true;
}
<form action="/form" method="post" id="form_id">
<div class="form-row names">
<div class="form-group col-md-3 name1">
<label for="inputFirstname">First name</label>
<input type="name" autofocus class="form-control" id="inputFirstname" placeholder="First name">
</div>
<div class="form-group col-md-3 name2">
<label for="inputLastname">Last name</label>
<input type="name" class="form-control" id="inputLastname" placeholder="Last name">
</div>
</div>
<div class="form-row clubs">
<div class="form-group col-md-3">
<label cfor="inlineFormCustomSelect">Club preference</label>
<select class="custom-select" id="inlineFormCustomSelect">
<option disabled selected value> -- select an option -- </option>
<option value="1">PSV</option>
<option value="2">Ajax</option>
<option value="3">Feyenoord</option>
<option value="4">De Graafschap</option>
<option value="5">RKVV Bergeijk 2</option>
</select>
<div class="invalid-feedback">Please choose one option</div>
</div>
</div>
<div class="form-group">
<label for="PFoot">Preferred foot</label>
<label class="form-check-label">
<input type="radio" id="PFoot" name="algorithm" value="right">
Right
</label>
<label class="form-check-label">
<input type="radio" id="PFoot" name="algorithm" value="left">
Left
</label>
<label class="form-check-label">
<input type="radio" id="PFoot" name="algorithm" value="zweipotig">
Zweipotig
</label>
</div>
<!-- http://getbootstrap.com/docs/4.1/components/buttons/ -->
<button class="btn btn-primary" type="submit">Submit</button>
</form>
The class name1 is div, not an input. Then you have to use (".name1 input") in the querySelector
document.querySelector('form').onsubmit = function() {
if (!document.querySelector('.name1 input').value) {
alert('You must provide your full name!');
return false;
}
return true;
}
in my case it's worked
<script>
document.querySelector('form').onsubmit = function() {
if (!document.querySelector('#inputFirstname').value) {
alert('You must provide your full name!');
return false;
}
return true;
}
Im using bootstrap 4, html, css, js the lot when trying to do this.
I'm trying to show some text boxes depending on the choice of the select option.
So if I choose "adadelta" I'd like to have only 4 specific text boxes(number type) show and everything else remain hidden. Should mention that the below form in hosted in a popover window which works fine, as such I've only included the form itself.
I've tried various javascript examples for similar situations but its just not showing the text boxes even when I try document.getElementById etc.
Any suggestions would be much appreciated.
<form>
<div class="form-group">
<label for="epochEdit">Epochs:</label>
<input type="number" class="form-control" id="epochEdit">
<label for="batchEdit">Batch Size:</label>
<input type="number" class="form-control" id="batchEdit">
</div>
<div class="form-group">
<label for="optChoose">Optimizer:</label>
<select class="form-control" id="optChoose">
<option selected>Open this menu</option>
<option value="sgd">sgd</option>
<option value="adadelta">adadelta</option>
<option value="rmsprop">rmsprop</option>
<option value="adam">adam</option>
<option value="adamax">adamax</option>
<option value="adagrad">adagrad</option>
<option value="nadam">nadam</option>
</select>
</div>
<div class="form-group">
<fieldset disabled>
<div class="form-group">
<label for="disabledNote">Note:</label>
<input type="text" id="disabledNote" class="form-control" placeholder="Optimizers will use keras default values!">
</div>
</fieldset>
<label for="lr">Learning Rate:</label>
<input type="number" class="form-control" id="lr">
<label for="rho">Rho:</label>
<input type="number" class="form-control" id="rho">
<label for="epsilon">Epsilon:</label>
<input type="number" class="form-control" id="epsilon">
<label for="decay">Decay:</label>
<input type="number" class="form-control" id="decay">
<label for="b1">Beta #1:</label>
<input type="number" class="form-control" id="b1">
<label for="b2">Beta #2:</label>
<input type="number" class="form-control" id="b2">
<label for="sDecay">Schedule Decay:</label>
<input type="number" class="form-control" id="sDecay">
<label for="moment">Momentum:</label>
<input type="number" class="form-control" id="moment">
<label for="nesterov">Nesterov:</label>
<input type="checkbox" class="form-check-input" id="nesterov">
</div>
<button id="subSettings" class="bg-color-3 btn btn-info"> Submit </button>
</form>
Try this
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var el = '<label for="lr">Learning Rate:</label>\
<input type="number" class="form-control" id="lr">\
\
<label for="rho">Rho:</label>\
<input type="number" class="form-control" id="rho">\
\
<label for="epsilon">Epsilon:</label>\
<input type="number" class="form-control" id="epsilon">\
\
<label for="decay">Decay:</label>\
<input type="number" class="form-control" id="decay">\
\
<label for="b1">Beta #1:</label>\
<input type="number" class="form-control" id="b1">\
\
<label for="b2">Beta #2:</label>\
<input type="number" class="form-control" id="b2">\
\
<label for="sDecay">Schedule Decay:</label>\
<input type="number" class="form-control" id="sDecay">\
\
<label for="moment">Momentum:</label>\
<input type="number" class="form-control" id="moment">';
function select() {
var optSel = $("#optChoose").val();
appendControls(optSel);
}
function appendControls(num) {
$('#elcontainer').empty();
if (num == "adadelta") {
$('#elcontainer').append(el);
}
}
</script>
</head>
<body>
<div class="container">
<h2>Form control: input</h2>
<p>The form below contains two input elements; one of type text and one of type password:</p>
<div class="form-group">
<label for="epochEdit">Epochs:</label>
<input type="number" class="form-control" id="epochEdit">
<label for="batchEdit">Batch Size:</label>
<input type="number" class="form-control" id="batchEdit">
</div>
<div class="form-group">
<label for="optChoose">Optimizer:</label>
<select class="form-control" id="optChoose" onchange="select();">
<option value="">Open this menu</option>
<option value="sgd">sgd</option>
<option value="adadelta">adadelta</option>
<option value="rmsprop">rmsprop</option>
<option value="adam">adam</option>
<option value="adamax">adamax</option>
<option value="adagrad">adagrad</option>
<option value="nadam">nadam</option>
</select>
</div>
<div class="form-group">
<fieldset disabled>
<div class="form-group">
<label for="disabledNote">Note:</label>
<input type="text" id="disabledNote" class="form-control"
placeholder="Optimizers will use keras default values!">
</div>
</fieldset>
<div id="elcontainer"></div>
<label for="nesterov">Nesterov:</label>
<input type="checkbox" class="form-check-input" id="nesterov">
</div>
<button id="subSettings" class="bg-color-3 btn btn-info"> Submit</button>
</div>
</body>
I'm new to scripting and trying to understand it better. I have a modal being displayed after clicking a button that has a form inside of it. There is a dropdown box with two selections. The first selection (Single) is meant for all divs and text fields to be displayed with the exception of the Guest text fields since they will be coming alone without a guest.
What I am trying to do is make the text fields show up once the second option (Couple) is selected so that the Guest name fields can be entered, and I can't seem to get them to display so that text can be entered. Here is my code:
<div class="form-group" id="selector">
<label for"selection" class="col-xs-8" control-label>Will you be joining us with a guest?</label>
<select class="form-control" id="selection" name="amount">
<option value="40.00">Single - $40.00</option>
<option value="75.00">Couple - $75.00</option>
</select>
</div>
<div class="form-group">
<label for="first_name" class="col-xs-4" control-label>First Name</label>
<div class="col-xs-8">
<input type="hidden" name="on0" value="First Name">
<input type="text" class="form-control" id="first_name"
name="os0" placeholder="i.e. John" required autofocus>
</div>
</div>
<div class="form-group">
<label for="last_name" class="col-xs-4" control-label>Last Name</label>
<div class="col-xs-8">
<input type="hidden" name="on1" value="Last Name">
<input type="text" class="form-control" id="last_name"
name="os1" placeholder="i.e. Smith" required autofocus>
</div>
</div>
<div class="form-group" id="guestFirst">
<label for="guestFirstName" class="col-xs-4" control-label>Guest's First Name</label>
<div class="col-xs-8" style="display: none">
<input type="hidden" name="on3" value="Guest's First Name">
<input type="text" class="form-control" id="guestFirstName" name="os3"
placeholder="i.e. Jane" autofocus>
</div>
</div>
<div class="form-group" id="guestLast">
<label for="guestLastName" class="col-xs-4" control-label>Guest's Last Name</label>
<div class="col-xs-8">
<input type="hidden" name="on4" value="Guest's Last Name">
<input type="text" class="form-control" id="guestLastName" name="os4"
placeholder="i.e. Smith" autofocus>
</div>
</div>
-----
<script>
$('#selection').on('change', function() {
if ( this.value == '75.00')
{
$("#guestFirstName").show();
}
else
{
$("#guestFirstName").hide();
}
});
</script>
Problem : you set the input field to display via jQuery but set display:none property to the col-xs-8 before that input filed.
Solution: I think you need to hide the div id #guestFirst, #guestLast and show them after select couple from dropdown.
So set those div style display none using css. then show those divs using if else condition on jQuery.
LiveOnFiddle
$('#selection').on('change', function() {
if ( this.value == '75.00')
{
$("#guestFirst, #guestLast").show();
}
else
{
$("#guestFirst, #guestLast").hide();
}
});
#guestFirst, #guestLast{
display:none;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-group" id="selector">
<label for="selection" class="col-xs-8" control-label>Will you be joining us with a guest?</label>
<select class="form-control" id="selection" name="amount">
<option value="40.00">Single - $40.00</option>
<option value="75.00">Couple - $75.00</option>
</select>
</div>
<div class="form-group">
<label for="first_name" class="col-xs-4" control-label>First Name</label>
<div class="col-xs-8">
<input type="hidden" name="on0" value="First Name">
<input type="text" class="form-control" id="first_name"
name="os0" placeholder="i.e. John" required autofocus>
</div>
</div>
<div class="form-group">
<label for="last_name" class="col-xs-4" control-label>Last Name</label>
<div class="col-xs-8">
<input type="hidden" name="on1" value="Last Name">
<input type="text" class="form-control" id="last_name"
name="os1" placeholder="i.e. Smith" required autofocus>
</div>
</div>
<div class="form-group" id="guestFirst">
<label for="guestFirstName" class="col-xs-4" control-label>Guest's First Name</label>
<div class="col-xs-8" >
<input type="hidden" name="on3" value="Guest's First Name">
<input type="text" class="form-control" id="guestFirstName" name="os3"
placeholder="i.e. Jane" autofocus>
</div>
</div>
<div class="form-group" id="guestLast">
<label for="guestLastName" class="col-xs-4" control-label>Guest's Last Name</label>
<div class="col-xs-8" >
<input type="hidden" name="on4" value="Guest's Last Name">
<input type="text" class="form-control" id="guestLastName" name="os4"
placeholder="i.e. Smith" autofocus>
</div>
</div>
I want to hide the text field when I select from item2 from the list. Here is the relevant part of my code:
<div class="control-group">
<label class="control-label">Select Parent</label>
<div class="controls">
<select name="parent_id" class="span6 m-wrap" data-placeholder="Choose a Parent" tabindex="1">
<option value="0" >Select Parent</option>
<?php
$admin_sql=mysql_query("select * from admin_detail where parent_id='0' and role='2'");
while($Fetch_Admin=mysql_fetch_array($admin_sql)) {
?>
<option value="<?php echo $Fetch_Admin['id']; ?>" onClick = "myFunction()" > <?php echo $Fetch_Admin['name'] ;?> </option>
<?php } ?>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<input type="text" name="name" class="span6 m-wrap" placeholder="Name" required/>
</div>
</div>
<div class="control-group">
<label class="control-label">Login ID</label>
<div class="controls">
<input type="text" name="login" class="span6 m-wrap" placeholder="Login ID" required/>
</div>
</div>
<div class="control-group">
<label class="control-label">Password</label>
<div class="controls">
<input type="password" name="password" class="span6 m-wrap" placeholder="Password" required/>
</div>
</div>
<div class="control-group" id="op1">
<label class="control-label" >Add Options</label>
<div class="controls">
<input type="text" name="option1" class="span6 m-wrap" placeholder="Option1" required/>
<input type="text" name="option2" class="span6 m-wrap" placeholder="Option2" required/>
<input type="text" name="option3" class="span6 m-wrap" placeholder="Option3" required/>
<input type="text" name="option4" class="span6 m-wrap" placeholder="Option4" required/>
<input type="text" name="option5" class="span6 m-wrap" placeholder="Option5" required/>
</div>
</div>
The associated javascript function is:
<script> function myFunction() {
document.getElementById("op1").style.visibility="hidden";
}
</script>
I have also tried the same thing by using a button. When I apply the onClick function to the button it work properly. Can some one show me where I am going wrong or which function should I use for the list.
You've placed your event handler in an onclick attribute of an <option> element. This probably isn't going to work as intended. Instead, add an onchange event handler to its parent <select> element as follows:
<select name="parent_id" ... onchange="document.getElementById('op1').style.visibility=(this.selectedIndex==2)?'hidden':'visible';">
document.getElementById("op1").style.display="none";
It should be:
document.getElementById("op1").style.display="none";
instead of:
document.getElementById("op1").style.visibility="hidden";
For a list like the one you have it is required to add the event handling on the select element.
<select name="parent_id" id="parent_id" class="span6 m-wrap" data-placeholder="Choose a Parent" tabindex="1" onchange="myFunction()">
<option value="0" >Select Parent</option>
<option value="item2" > item2 </option>
</select>
Then your js code could be like,
function myFunction()
{
if(document.getElementById("parent_id").value=="item2"){
document.getElementById("op1").style.visibility="hidden";
}else{
document.getElementById("op1").style.visibility="visible";
}
}
Example,
http://jsfiddle.net/5E8AH/
Also, the difference between display:block and visibility:hidden is that the latter will hide the content but still take the space as if it were visible.
Use this one:
document.getElementById("id").style.display = "none";
or
document.getElementById("id").style.visibility = "hidden";
try this,
document.getElementById("op1").style.display="none";