根据h1文本设置选择值

Question

I have the following form:

$(function() {
    if () {}
    else {}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Sandeep</h1>
<form>
    <select>
        <option>Non Selected</option>
        <option selected>Michael</option>
        <option>Sandeep</option>
    </select>   
</form>

I want to find a way to say in javascript: if the text of the h1 is Sandeep the option selected will be sandeep .

I don't know how to define the condition inside the if statement. Any ideas?

Answer 1

Use .text() to get the text in the <h1> , and compare that with Sandeep . Use .val() to set the value of the <select>

 if ($("h1").text() == "Sandeep") { $("select").val("Sandeep"); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>Sandeep</h1> <form> <select> <option>Non Selected</option> <option selected>Michael</option> <option>Sandeep</option> </select> </form> 

Answer 2

Simple solution is to directly set the value of select tag to that of the text inside h1 .

JS CODE:

$(function () {
   var selectedText = $('h1').text();
   $('select').val(selectedText);
});

Live demo @ JSFiddle: http://jsfiddle.net/dreamweiver/k151ye9h/

Answer 3

See inline comments

 $(function() { var text=$('.name').text(); //get the header value by referring its class $('select').find("option[text=" + text + "]").attr("selected", true); //^^Find that particular option whose text is same as in header }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1 class="name">Sandeep</h1> <form> <select> <option>Non Selected</option> <option text="Micheal" selected>Michael</option> <option text="Sandeep">Sandeep</option> <!--Add text property to each option--> </select> </form> 

Answer 4

Simply use Jquery selector to select the value based on "h1".

 $(document).ready(function() { if ($("h1").text() == "Sandeep") { $("select").val("Sandeep"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>Sandeep</h1> <form> <select> <option>Non Selected</option> <option selected>Michael</option> <option>Sandeep</option> </select> </form>