In the jQuery choose HTML option from HTML select. Select by index, value. Example: $("#myColors").prop('selectedIndex', 2);

Search

Programming, development, testing

→

jQuery - JavaScript library for convenient work with HTML

→

In the jQuery choose HTML option from HTML select. Select by index, value. Example: $("#myColors").prop('selectedIndex', 2);

Looked at 6106 times

In the jQuery choose HTML option from HTML select. Select by index

last updated: 22 November 2018

To select an HTML option by index:

JavaScript

$("#myColors").prop('selectedIndex', index);

To select an HTML option by value:

JavaScript

$("#myColors").val(Element value);

Example

Html

<html>


<head>
     <meta charset="utf-8">
     <title>Example</title>
</head>


<body>
     
     <script src="https://dir.by/example_lib/jquery/jquery-3.3.1.min.js"></script>

     
     <select id='myColors'>
          <option value='10'>Red</optoin>
          <option value='20'>Green</option>
          <option value='30'>Blue</option>
     </select>
     <select id='myBooks'>
          <option value='90'>Three Cats</optoin>
          <option value='100'>Magician</option>
          <option value='120'>Magician</option>
          <option value='120'>Fairy tales</option>
     </select>

     
     <script>
          // the page has opened
          $( function()
          {
               var elemSelect = $("#myBooks");

               // select item by index
               $("#myBooks").prop('selectedIndex', 2);
               // 'Magician'

               // select an item by value
               $("#myColors").val(30);
               // 'Blue'
          });
     </script>

</body>

</html>

Example we look, we test

← Previous topic
Take value you have an HTML element in the jQuery. Example: var value1 = $("#Name").val();

Next topic →
In the jQuery take value, index from active HTML option. Example1: var value = $("#myColors").val(); Example 2: var index = $("#myColors").prop('selectedIndex');

Your feedback ... Comments ...

Объявления

Объявления

• What the JQuery ?

• jQuery where to download and how to connect?

• Create a new application with jQuery

• Examples jQuery

• Event html the page has opened. jQuery Example: $(function () {...}); or $( document ).ready(function() { ... });

find one item by ID

• Find Item by ID in the jQuery. Example: $("#Name")

find many items in the list ID

Find Item by: tag, attribute, class

• Find the element (elements) by attribute name in the jQuery. HTML example: <div color='green'>Hello!</div> Example of jQuery: var elem = $("[color]");

• find the element by attribute and attribute value in the jQuery. Example: $("[my='123a']")

iterate through all the elements with the desired class

• Iterate through all items | each | in the jQuery. Example: $('.book').each(function(i, elem) { /*to do something*/ });

element (show/hide)

• Show/hide item in the jQuery. Example: $("#Name").show()

class (add/remove from an item)

• Add/Remove class in the jQuery. Example: $("#Name").addClass("my"); $("#Name").removeClass("my");

content of the element (change/take)

• Change the content of an element in the jQuery. Example: $("#Name").html("Good morning");

• Take content from an item in the jQuery. Example: $("#Name").html();

value for attribution (change/take)

• Change the value for the attribute in the jQuery. Example: $("#Name").attr("aaa", "Hello"); $("#Name").removeAttr("aaa");

• Take the value from the attribution in the jQuery. Example: $("#Name").attr("aaa");

value for the DOM object property (change/take)

• Change the property of a DOM object in the jQuery. Example: $("#Name").prop("eee", "Hello");

• Take a property of the DOM object in the jQuery. Example: $("#Name").prop("eee");

meaning checkbox (change/take)

• Change the value for checkbox in the jQuery. Example: $("#Name").prop('checked', true);

• Take value checkbox in the jQuery. Example: $("#Name").prop('checked');

CSS styles for an element

• Change the CSS style of an element in the jQuery. Example: $("#Name").css("color", "#cc0000");

• Take CSS style of the element in the jQuery. Example: var value1 = $("#Name").css("color");

Create an item

• insertAfter | Insert new content HTML after the desired element in the jQuery. Example: $("<font color='green'>my text</font>").insertAfter($("#div1"));

• append | Create an item HTML to the end of the block element in the jQuery. Example: $("body").append("<font color='green'>my text</font>")

value for an item (change/take)

• Change value for HTML element in the jQuery. Example: $("#Name").val("Hello");

• Take value you have an HTML element in the jQuery. Example: var value1 = $("#Name").val();

select an item from the list by index

• In the jQuery choose HTML option from HTML select. Select by index, value. Example: $("#myColors").prop('selectedIndex', 2);

• In the jQuery take value, index from active HTML option. Example1: var value = $("#myColors").val(); Example 2: var index = $("#myColors").prop('selectedIndex');

enable / disable

• Enable / disable for HTML element in the jQuery. Example of enable: $("#Book").removeAttr("disabled"); Disable example: $("#Book").attr("disabled", "disabled");

Send a request ajax

• Send ajax query | jQuery. Example: $.ajax({ type:"POST", url:"...", data:{...}}, success: function(msg) { ... } });

• Event when ajax query has been finished | jQuery. Example: $(document).ajaxStop(function () { ... });

Событие

handling the click event

• Event when we click the left mouse button on the element | click | jQuery | Example: $("#Name").click(function(event) { ... });

• Handle event click for all elements | jQuery. Example: $(document).on("click", function(event){ ... });

event handling submit

• Event when on your form press the button "submit" | jQuery. Example: $("#Your Form ID").submit( function() { ... } );

Additional topics, questions

• jQuery.fn and jQuery.prototype it's the same thing

WWW sites to explore JQuery

• Sites to explore JQuery

Ваши вопросы присылайте по почте: info@dir.by