logo
down
shadow

Update options on select click in chrome


Update options on select click in chrome

By : Eylas
Date : November 22 2020, 11:12 AM
I hope this helps . Chrome doesn't update the UI when the select is open and the options are updated, so you could work around it by blurring the element & giving it focus again:
code :
// Update the options first
$('option:first', select).remove();
for(var i = 0; i < Options.length;i++)
{
    var option = $("<option/>");
    option.val(Options[i].id).text(Options[i].text);
    $(select).append(option);
}
// Take focus away from the select
$(select).blur();
// Force the dropdown to open:
// http://stackoverflow.com/questions/10453393/how-to-open-the-select-input-using-jquery
var e = document.createEvent("MouseEvents");
e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
select.dispatchEvent(e);


Share : facebook icon twitter icon
Select options through ng-click is not working in chrome browser using AngularJS

Select options through ng-click is not working in chrome browser using AngularJS


By : GlumpyCat
Date : March 29 2020, 07:55 AM
I wish did fix the issue. At last , I found solution.
JS fiddle link
code :
<div ng-app="miniapp">
    <div ng-controller="Ctrl">
        <select ng-model="selectedColor" ng-options="color as color.name for color in colors" ng-init="selectedColor = check(color1,colors)" ng-change="setColor(selectedColor)">
            <option value="">Select A Color</option>
        </select>
        <br/>
        <br/>
        Color Id:    <span ng-bind="colorId"></span>
        <br/>
        Color name:    <span ng-bind="color"></span>
        <br/>
        Color shade:    <span ng-bind="shade"></span>
        <br/>
    </div>
</div>
var $scope;
var app = angular.module('miniapp', []);

function Ctrl($scope) {
    $scope.colorId = 4;
    $scope.shade = null;
    $scope.color = null;
    $scope.color1 = {name:'Red', value: 'red',id:2};
    $scope.colors = [
        {name:'Red', shade: 'white',id:1}, 
            {name:'Orange', shade: 'red',id:2}, 
            {name:'Yellow', shade: 'blue',id:3}, 
            {name:'Green', shade: 'yellow',id:4}, 
            {name:'Blue', shade: 'indigo',id:5}, 
            {name:'Indigo', shade: 'violet',id:6}, 
            {name:'Violet', shade: 'orange',id:7}
     ];
    $scope.check =function(selectedColor,colors){
        var i = null;
        for(i in colors){
            if(colors[i].id == selectedColor.id){
                return colors[i];
            }
        }
    };
    $scope.setColor= function(color){
        $scope.colorId = color.id;
        $scope.shade = color.shade;
        $scope.color = color.name;
    };
};
How to update <select> options with AngularJs on click

How to update <select> options with AngularJs on click


By : user3555108
Date : March 29 2020, 07:55 AM
I wish this helpful for you I have the following html code , You don't need curly braces inside ng-selected:
code :
<option value="m" ng-selected="GenderInfo.Gender =='m'">Male</option>
<option value="f" ng-selected="GenderInfo.Gender =='f'">Female</option>
Update second select options on the basis of first select options MVC 4 razor

Update second select options on the basis of first select options MVC 4 razor


By : Jack W
Date : March 29 2020, 07:55 AM
I wish this help you Here is a general solution of cascade drop down list of country and cities it can be implement for any other scenario in the same way
i have a class City
code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace CascadeDropdownLists.Models
{
public class City
{

    public City()
    { }

    public City(int id, string name)
    {
        this.Id = id;
        this.Name = name;
    }

    public int Id { get; set; }
    public string Name { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using CascadeDropdownLists.Models;

namespace CascadeDropdownLists.Controllers
{
public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetCities(int id)
    {
       // List<Models.City> cities = new List<Models.City>();

        List<City> cities = new List<City>();

        if (id == 1)
        {
            cities.Add(new City(1, "Lahore"));
            cities.Add(new City(2, "Islamabad"));
        }
        else {
            cities.Add(new City(1, "Paris"));
            cities.Add(new City(2, "Alaska"));

        }
        return this.Json(cities,JsonRequestBehavior.AllowGet);
    }

}
}
@{
Layout = null;
 }

 <!DOCTYPE html>

 <html>
 <head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
 @Scripts.Render("~/bundles/jquery")
 <script type="text/javascript">
     $(document).ready(function () {
         $("#countrySelector").change(function () {
             var countryId = $("#countrySelector").val(); 
             $("#citySelctor option").remove();
             $.getJSON("/home/GetCities?id=" + countryId, function (data) {
                 $("#citySelctor").append('<option>-Select City-</option>');
                 $.each(data, function (i, item) {
                     $("#citySelctor").append('<option value=' + item.Id + '>' + item.Name + '</option>');
                     //alert('Id = ' + item.Id + " Name = " + item.Name);
                 });

             });

         });

     });
<body>
       <div>
       <div>
       <select id="countrySelector">
       <option value="0">-Select Country-</option>
       <option value="1">Pakistan</option>
       <option value="2">France</option>
  
        </select>
        <div>
        <select id="citySelctor">
        <option>-Select City-</option>
      
        </select>
        </div>
        </div>
       </div>
</body>
How to handle the options "Sorry, no matching options" hanging when click on the vue select with empty options

How to handle the options "Sorry, no matching options" hanging when click on the vue select with empty options


By : user2321497
Date : March 29 2020, 07:55 AM
I wish did fix the issue. vue-select allows slots, I found a list of slots in this codepen
So you can use the slot for no-options found, and close the select when that element is clicked by using ref and $refs. I found more info on how to close v-select in this github issue
code :
<v-select ref="select">
  <span slot="no-options" @click="$refs.select.open = false">
    Sorry, no matching options
  </span>
</v-select>
Jquery simulate click event on all options in select to get data from multiple select options

Jquery simulate click event on all options in select to get data from multiple select options


By : user3111499
Date : March 29 2020, 07:55 AM
it fixes the issue You should probably use .trigger('click') to properly emit click event.
.trigger('change') is emitting change event, that most of the time shows that selector value has been changed by some action. It can be anything but click, so you can't rely on it to simulate click
Related Posts Related Posts :
  • How to fix "Object is possibly undefined"?
  • How can one use TensorFlow.js tf.data.generator for remote data sources since generators can't use callbacks
  • How can I unescape a string from python using javascript
  • How to add days into my date using angular pipe?
  • Keydown not firing on page loaded in <object> element
  • Refetch queries in react-native with graphql
  • How to execute functions across objects identically to executing the function itself with a this reference
  • NGRX Effect withLatestFrom Typescript error ts2345 troubleshooting
  • Make a checkbox checked if its id is present in an array
  • Remove disabled class when response code is 1 in each element javascript
  • Creating an input select in an editable form
  • How to convert string of ASCII codes to string of characters?
  • Detect system time and set css animation start time in browser
  • How can I build a dataTable, with a dropbox filter on top, calculated on backend?
  • What needs to be done to make multiple screen support for Javascript happen?
  • How to format a full year date/time
  • this.props.match.params passed into child component after authorisation
  • Highcharts: create multiple series grouped my month and year using JSON data
  • JS: Keep variable values for onclick event attached inside for loop
  • Failed prop type. Required prop types are undefined in my redux store
  • How to not import Vue in main js and store
  • Javascript make table with rows and columns given by user and change each cells colour onclick
  • How do you fix "ERROR in Path must be a string. Received undefined" in webpack4/copy-webpack-plugin
  • Protractor Fetching Email with Mail Listener: TypeError: deferred.fulfill is not a function
  • date-time picker bootstrap Tempus Dominus
  • How do I get all radio button id's via the name
  • Using d3 in for loop
  • Impact an array of objects
  • JS split string and return index of each split
  • Javascript/JS - Referring to classes and variables dynamically within a change event loop
  • Query a specific GET field?
  • Mapping multiple form inputs of the same name into a JavaScript object
  • How can I not to return a field from object in JavaScript?
  • Creating and testing a single Javascript nested function
  • Formatting server side jQuery Datatable
  • How to show tooltips onmouseover in p:calendar
  • typescript - calling function at random intervals in ionic
  • Correct way to populate an array from a promise
  • JavaScript Mini-Max Sum - Returns 0
  • canvas not clearing while radius of circle decreasing..?
  • Dynamically Growing Dropdown Component with clickoutside directive
  • MultichoiceField in ModelForm for Django with DB relations
  • React Native "if" statement behaviour? Early exit or full evaluation?
  • Call Jquery function on Input tag having data-slider
  • How to process negative shifts in Caesars Cipher (Javascript)
  • Animating Line position in Konva
  • Why a state is not resolved as a variable in nextjs
  • How to efficiently evaluate element in javascript array by using reduce function
  • Google script web app goes blank page after submit
  • Event for the load-end of dynamically added CSS files through innerHTML
  • How to retrieve some text from a sibling div element in jQuery
  • How to display half star rating in my following custom angular star rating example?
  • Angular 8: ternary operation for img src attribute?
  • Is this proper JS for this J-Query expanding textArea? Is 'this' the same as event.target in JS also?
  • How to fix user fetching from a collection in discord.js?
  • Can I create an item id when adding it to a collection?
  • Temporarily disable a specific option after it has been selected (in any selector) for all instances of that selector in
  • Vis.js timeline item align property not working
  • How to select one element instead of all elements using 'clicked' in a Django for loop
  • How to check if 2 <img> tags contain the same image
  • shadow
    Privacy Policy - Terms - Contact Us © festivalmusicasacra.org