logo
Tags down

shadow

Cannot select option on select generated dynamically


By : Christian Sherland
Date : October 15 2020, 08:10 AM
wish help you to fix your issue I have this method which iterate over a collection of object: , You do not need to assign the function to a variable.
Change:
code :
generate_action = function(data_id)
function generate_action(data_id)
var obj = {actions:[ {id: "1", id_section: "1", id_section_to: "2", id_criteria: "1", id_parameter: "1"},
{id: "2", id_section: "2", id_section_to: null, id_criteria: "3", id_parameter: "2"}]}

var generate_action = function(data_id)
{ 
    var select = '<select class="form-control section-actions" data-id="' + data_id + '"><option value="">END</option><option value="2">GO TO SEC 2</option></select>';
   $('#select-container').append(select);
}

$.each(obj.actions, function (i, act) {
     generate_action(i+1);
     $('.section-actions[data-id=' + i + 1 + '] > option[value='+act.id_section_to+']').prop('selected', true);
});
$('.section-actions[data-id="1"] > option[value=2]').prop('selected', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="select-container"></div>


Share : facebook icon twitter icon

JQuery Getting the value of dynamically generated Option in a Select


By : Ashis Patra
Date : March 29 2020, 07:55 AM
To fix this issue I'm trying to get the value of the option that the user selects on a dynamically generated option in a dynamically generated select. Right now I'm just trying to get an alert to pop up though and have been thoroughly unsuccesful. , Yeah you're spot on, .change() is not a delegated hander. Try .on()
code :
$('body').on('change', '.lowerSerialSelect', function() {
  // code here
});

Select option in dynamically generated select (dropdown) list


By : Philipp Waldhauer
Date : March 29 2020, 07:55 AM
Any of those help One problem is that load() is an ajax method and ajax is asynchronous.
this means if you want to interact with the new html you have to do it in the success callback that fires after that html is received
code :
$("#first-choice").change(function() {
      $("#second-choice").load("textdata/" + $(this).val() + ".txt", function(){    
       // new html exists can work with it here

      });

     // any code here will run before new html arrives
})

Jquery find each dynamically generated select inside div and add class to select if option value is " "


By : Nik
Date : March 29 2020, 07:55 AM
wish help you to fix your issue I have dynamically generated select fields inside a div called mydiv. The id and class names also for each of my select fields are also dynamically generated. ,
you can not add option border color
code :
// this example for each options

$('.mydiv select option').each(function() {
     var myvalue= $(this).val();
     if (myvalue===" "){
        $(this).addClass("red");
     }else{
        $(this).addClass("green");
     }
 });
 
 // this example on change select
 
 $('.mydiv_2 select').on('change',function() {
     var myvalue= $(this).val();
     if (myvalue===" "){
        $(this).removeClass('green-border').addClass("red-border");
     }else{
        $(this).removeClass('red-border').addClass("green-border");
     }
 });
.red {
  background: #f00;
}

.green {
  background: #0f0;
}

.red-border {
  border:solid 1px #f00;
}

.green-border {
  border:solid 1px #0f0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h3>Example for each options</h3>

<div class="mydiv" id="mydiv">

  <select id="dynamically_generated_select_169" class="someclass169">
    <option value=" ">Not mapped</option>
    <option value="1">Saab</option>
    <option value="2">VW</option>
    <option value="3" selected>Audi</option>
  </select>

 <!-- Another select Each select and its options are all dynamically generated -->

  <select id="dynamically_generated_select_170"class="someclass170">
    <option value="1">Saab</option>
    <option value=" ">Not mapped</option>
    <option value="2">VW</option>
    <option value="3" selected>Audi</option>
  </select>

</div>

<br>

<h3>Example on change</h3>

<div class="mydiv_2" id="mydiv">

  <select id="dynamically_generated_select_169" class="someclass169">
    <option value=" ">Not mapped</option>
    <option value="1">Saab</option>
    <option value="2">VW</option>
    <option value="3" selected>Audi</option>
  </select>

 <!-- Another select Each select and its options are all dynamically generated -->

  <select id="dynamically_generated_select_170"class="someclass170">
    <option value="1">Saab</option>
    <option value=" ">Not mapped</option>
    <option value="2">VW</option>
    <option value="3" selected>Audi</option>
  </select>

why is my option tag not appending on dynamically generated select tag


By : Shashank Pathak
Date : March 29 2020, 07:55 AM
wish help you to fix your issue Create the selectTag as a jQuery object first. You can then append to it.
code :
$(function(){
    const $firstElemTd = $('#none td:first-child');
    const $selectTag = $('<select></select>');
    //append the selectTag to the td
    $firstElemTd.append($selectTag);
    //now that the selectTag is a distinct jQuery object you can append to it. EG:
    var response = [{"name":"a"},{"name":"b"},{"name":"c"}];
    $.each(response, function(key, balyu) {
      $selectTag.append($('<option/>').val(balyu.name).text(balyu.name));
    });

/* The same thing in the ajax response should work too.
(commented out here for the snippet)
    $.ajax({
      method: 'GET',
      url: url,
      dataType: 'json',
      success: function(response) {
        $.each(response, function(key, balyu) {
          $selectTag.append($('<option/>').val(balyu.name).text(balyu.name));
        });
      }
    });
   */ 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="none"><tr><td></td></table>

How to get value from dynamically generated <option> <select> express ejs


By : user3607120
Date : March 29 2020, 07:55 AM
this will help I have figured out the solution to this, body-parse should be required and extended true.
when having text and image as 1 form to be posted to the back-end make sure
code :
//my post for image and text function
const PostPhoto = (req, res) => {
   const suite_photo_id = uuid(); 

  upload(req, res, function(err) {
    const {suiteselected} = req.body;
    console.log(req.file);
    var imagePath = req.file.path.replace(/^public\//, '');
    console.log( suiteselected + " --ID")
   console.log(imagePath);


   pool.query(
    "INSERT INTO suite_photos (suite_photo_id,suite_photo,suite_id) VALUES($1,$2,$3)",
    [suite_photo_id, imagePath,suiteselected],
    (error, result) => {
      if (error) {
        throw error;
      } else{
        console.log(result);
        res.redirect("/admin");
      }
    }
  );
 });



};

Related Posts Related Posts :
  • *NgFor toggle show/hide individual element
  • Add placeholder to multiple google chart string filters
  • Get value from radio button Angular Material Dialog
  • Use mergeWith of Lodash with nested objects
  • with javascript function created select onchange with counter parameter
  • SyntaxError using spread operator in webpack.config.js
  • Express - push to testing array on post request
  • Why should I use Interfaces in Typescript
  • What is a best way of detecting change of array?
  • Images are not getting the Div height when loading in jQuery
  • Find element by HTML in Cypress
  • Travsering table and storing values as key/value pair
  • Angular Material Checkbox doesn´t change state of checked
  • copy props from obj to obj in a functional Programming way
  • Bubble chart with NextJS and highcharts-react-official
  • Update value in table from Dialog Angular MAterial
  • ReferenceError because the variable is not being passed on
  • RequiredJS failed to Load a JS file
  • How can I disable the Stripe payment request button until a form is complete?
  • How to show a element immediately, such as a loading indicator, with Vue? nextTick isn't working as I expect
  • v-on:click with target not in the correct element?
  • Get last occurrence of item in array of arrays (Javascript)
  • Event binding with $(window) on dynamically created AJAX elements
  • How to use a variable in a custom function in Twilio Studio?
  • Prevent textarea from automatically scrolling when I change cursor position
  • Headless browser in Azure functions JavaScript?
  • Javascript to "fix" all hrefs of class with regex
  • How do I pass a value to list-item
  • Using component in entry component?
  • Working with different timezones in Javascript
  • Does MobX Observables have anything to do with RxJS ones?
  • Google extension how to inject my script to active tab and link with pop-up button?
  • Removing duplicate keys from object array
  • One @click event with multiple toggles
  • How to add TextToSpeech.talk("hi') action to a button
  • Not able to render vanilla webcomponent imported as template
  • How can I remove Materialize's select dropdown when using select2?
  • react-loadable multiple resource loading not working
  • Making SharePoint Lookup field multi selection in code with PNP/SP
  • input equal to a string for one array, and get string from same position from another array - JavaScript
  • Proper Method for Storing JavaScript Instances in Nan::ObjectWrap C++ Class
  • jQuery Calculate remaining characters length for input
  • Highcharts transform JSON into data without losing informations
  • How can I validate my file input name using regex?
  • Moment js interval for a day in 12 hours format
  • What would be the implementation of the function in this scenario
  • How to get text next a input tag using document.querySelector?
  • What could be reason of the error 'Maximum call stack size exceeded' inside Ember Data?
  • Leaflet polyline precision loss on zoom out
  • Convert Javascript regex to Typescript regex
  • Textext.js - Remove all tags and clean textarea
  • Array splice with unexpected results
  • Having trouble with multiple active states in ReactJS
  • Error 500 for some Ajax requests on server
  • Event call at the end of HTTP call
  • wooommerce add to cart based on gravity form radio button
  • Angular 6: table with *ngIF generates one <td> more than i need
  • how to load an external script with react?
  • Getting current stored value from database in a form on Cascading dropdowns in edit mode C# MVC
  • Best Way to Pass Query Parameters to URL Using Axios in Vue?
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org