Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Front End Technology Articles
Page 591 of 652
How do you remove all the options of a select box and then add one option and select it with jQuery?
To remove, use remove() and append() to add option in already created select list. Let’s say the following is our select − JavaScript MySQL ExampleFollowing is the code to remove all the options and add a new one − Document JavaScript MySQL $('#demo') .find('option') .remove() .end() .append('MongoDB') .val('MongoDB') ; To run the above program, save the file name anyName.html (index.html). Right click on the file and select the option “Open with Live Server” in VS Code editor.OutputThe output is as follows −
Read MoreHow to get value of data attribute and use it in jQuery?
To get value of data attribute, use −$(“yourSelector”).data()The following is our input type with data attribute −ExampleFollowing is the code − Document var value = $('#txtValue').data('value'); console.log("The value is=" + value); OutputThe output is as follows −
Read MoreMatch the style of element while performing paste - jQuery?
For this, use tag. Set it to contenteditable −We have set the following style for paste − pre { min-height: 150px; min-width: 300px; font-family: 'Times New Roman', Times, serif; white-space: pre; background-color: rgb(19, 22, 27); color: #98d8e7; } Now, you can use paste event listener −var getTheData = document.getElementById('data'); getTheData.addEventListener('paste', PutTheDataOnEditor);ExampleFollowing is the code − Document pre { min-height: 150px; min-width: 300px; font-family: 'Times ...
Read MoreManipulate two selects on page load with jQuery
Let’s say the following is our first select − John David Bob Mike Sam Carol Following is our second select − David Mike Carol We need to remove the options in the first select, which are similar to options in the second select. For this, use val(). Following is the complete code −Example Document John David Bob Mike Sam Carol David Mike Carol $('#remaining_name > option').each(function (i, el) { var value = $(el).val(); $('#all_present_name > option[value="' + value + '"]').remove(); }); OutputThe output is as follows −
Read MorejQuery .val change doesn't change input value?
For this, you need to use attr(). The attr() method can be used to either fetch the value of an attribute from the first element in the matched set or set attribute values onto all matched elements.Following is the JavaScript code −Example Document $('#myURL').attr('value', 'http://www.facebook.com'); To run the above program, just save the file name anyName.html(index.html) and right click on the file and select the option open with live server in VSCode Editor.OutputLook at the above sample output the URL has been changed from ...
Read MoreAdding options to a using jQuery?
To add options to a , you need to use append(). Following is the JavaScript code −Example Document Book TV var mySelection = new Option("Mobile", "Samsung Mobile"); $(mySelection).html("Samsung Mobile"); $("#selectCategory").append(mySelection); To run the above program, save the file name anyName.html(index.html) and right-click on the file and select the option open with live server in VS Code editor.Output
Read MoreHow to create a responsive website with Bootstrap 4?
To create a responsive website with Bootstrap 4, the code is as follows −Example Bootstrap 4 Website Example body{ height: 100vh; } Website ⇅ Logo Link Link Link Headline 1 Published in January Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias perferendis hic quas praesentium quod totam atque dignissimos nobis numquam consequuntur? Headline 2 Published in march Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam doloribus incidunt voluptatum labore dolorem voluptate iure dicta, dolorum quis maiores. Copyright © Website OutputThe above code will produce the following output −On resizing the screen −
Read MorejQuery Misc param() Method
The param() method in jQuery is used to create a serialized representation of an array or object.SyntaxThe syntax is as follows −$.param(obj, val)Above, obj is the object to serialize, whereas Val specifies whether or not to use the traditional style of param serialization.ExampleLet us now see an example to implement the jQuery param() method− $(document).ready(function(){ ob = new Object(); ob.stdid = "S01"; ob.roll = 3; $("button").click(function(){ $("p").text($.param(ob)); }); }); Student Details Serialized Representation OutputThis will produce the following output−Click on the button to get serialized representation−
Read MorejQuery dequeue() with Examples
The dequeue() method in jQuery is used to remove the next function from the queue and then execute the function.SyntaxThe syntax is as follows −$(selector).dequeue(queue)Above, the queue is the name of the queue.ExampleLet us now see an example to implement the jQuery dequeue() method − $(document).ready(function(){ $("button").click(function(){ var div = $("div"); div.animate({height: 250}, "slow"); div.animate({left: "+=200", top: "+=100" }, "slow"); div.queue(function(){ div.dequeue(); }); ...
Read MorejQuery hide() with Examples
The hide() method in jQuery is used to hide selected elements.SyntaxThe syntax is as follows −$(selector).hide(speed, easing, callback)Above, the parameter speed is the speed of the hide effect, whereas easing is the speed of the element in different points of the animation. The callback function is a function that executes after hide() method completes.ExampleLet us now see an example to implement the jQuery hide() method − $(document).ready(function(){ $(".btnhide").click(function(){ $("p").hide(); }); $(".btnshow").click(function(){ $("p").show(); }); }); ...
Read More