0

Suppose i have a textbox and a select box with like this.

<input type="text" id="txt"><br/><br/>

<select id="sel"></select>
    <option value="0"> Select Value </option>
    <option value="1"> Option 1</option>
    <option value="2"> Option 2 </option>

</select>

when i click on that textbox and write some thing It will generate new option value to the select box by some others method.( Means I am using TamperMonkey for some website and they use some method to populate the option value and i want to automatically select the newly generated option through tamparmoneky ). This is the newly generated option value.

<select id="sel"></select>
    <option value="new0"> Select Value </option>
    <option value="new1"> New Option 1</option>
    <option value="new2"> New Option 2 </option>
    <option value="new3"> New Option 3 </option>
</select>

My code is

$(document).ready(function() {

  $('#txt').val("somevalue");
  //Trigger onchange event 
  $('#txt').trigger('change');

  // now how to know when option has changed
  $('#sel').change(function() {
     alert( 'Handler for .change() called.');
     $('#sel').val("new3");
  });


});

My goal is when The website open the TamperMonkey script automatically enter some value to textbox and trigger a change event. The original site has some function on change event. By which they populate new option value to the select box. Now the problem is i dont understand when they load the option value. How to know when the new option value loaded and then select the value from my Tamper Monkey script?

Ashis Biswas
  • 747
  • 11
  • 28

2 Answers2

0

$(document).ready(function() {

  $('#txt').val("somevalue");
  //Trigger onchange event 
  $('#txt').on('change', function() {
    var txtInp = $('#txt').val();
    $('#sel option').each(function(i) {
      var modVal = txtInp+$(this).val();
      $(this).attr('value',modVal);
    });
  });

  // now how to know when option has changed
  $('#sel').change(function() {
     $(this).find('option:last-child').attr('selected');
  });


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<input type="text" id="txt"><br/><br/>

<select id="sel">
    <option value="0"> Select Value </option>
    <option value="1"> Option 1</option>
    <option value="2"> Option 2 </option>

</select>
yjs
  • 692
  • 3
  • 11
  • Again I am tellng I don't want to append anything to select box, the websiteatomatically populated option when textbox on change event. Textbox value is not a mandatory option. Just when I change anything it will automatically call a specific funtion to populate the selectbox, and I don't have any control on that script because this is not my site. I just want after automatically enter some text to textbox and trigger change event, and thhis site will populated new option value and I want to set a option among them through my script. I do not need to add option value by me. – Ashis Biswas Dec 18 '15 at 07:56
  • @AshisBiswas you want to select an option through js? – yjs Dec 18 '15 at 08:49
  • Yes. But the option which i want to select generated by some other method of this website – Ashis Biswas Dec 18 '15 at 08:51
  • anyway you need to know the function name of script which does that....and at end of line, you can call; $('#sel option:last-child').attr('selected'); – yjs Dec 18 '15 at 08:53
  • I think this is not the right way. BTW thanks for your help :) – Ashis Biswas Dec 18 '15 at 08:58
  • Without any code or input, how is anyone suppose to give a solution? – yjs Dec 18 '15 at 09:00
  • I have added code already. Can you tell me is there any way to know from jquery that if the selectbox option value has changed automatically it trigger an event? Again I am telling i can't alter the code which will generate new option, because this is not my site. – Ashis Biswas Dec 18 '15 at 09:07
  • This might work; you select on change function - $('#sel').change(function() { $(this).find('option:last-child').attr('selected'); }); – yjs Dec 18 '15 at 09:19
  • change function not triggered. – Ashis Biswas Dec 18 '15 at 09:26
  • Give an alert("check"); replace that line in change function and see if it working...If it is not, then your select box might be ruled out by some jquery plugin which styles it. – yjs Dec 18 '15 at 09:29
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/98323/discussion-between-ashis-biswas-and-yjs). – Ashis Biswas Dec 18 '15 at 09:41
0

I don't know what's in the textbox change event but if it is only change event then you can do one thing, as change event get fired only after the focus out from textbox and focusout event get fired just after the change event so do as below:

  $(document).ready(function() {

  $('#txt').val("somevalue");

  //Trigger onchange event 
  $('#txt').trigger('change');

  // attach focusout event to textbox this get called only after the change event
  $('#txt').on('focusout',function(){
    $('#sel').trigger('change'); // trigger select change event or any custom events
  });

  // now how to know when option has changed
  $('#sel').change(function() {
     alert( 'Handler for .change() called.');
     $('#sel').val("new3");
  });

});

Hope this will help.(I know this is not good option but it will fit in your case.)

BhushanK
  • 1,205
  • 6
  • 23
  • 39
  • no need to add focusout. Because Myscript works well. When i trigger change it automatically call the change function which is already created by the website. I thing there is a function on change event. Because When i trigger change event it automatically generate new option value. Now the problem is i cant select newly generated value by this method. $('#sel').change(function() function not fired when change event done by the textbox. – Ashis Biswas Dec 18 '15 at 11:18
  • @Ashis : "$('#sel').change(function() function not fired when change event done by the textbox"......that's why I attached `focusout` event to textbox, it will trigger `$('#sel').change` and you will able to select newly added item. – BhushanK Dec 18 '15 at 12:01