selector for focus event

[pepe]

Does anybody know / have some guidance for fetching the focus event on single choice dropdown list?
The reason for this is to save the old selection before change event. This is to synchronize some lists.
Basically, the call looks like:

$('.field_1237').focus(function (){
...... do something in here
});

I tried all different classes, ids, etc. but cannot get the right selector for this event.
On the other hand, the above selector works for the change event on that form element.
Thank you,
Pepe

[eddydeniro]

Try with id selector, not class

Code: Select all

//element's id is fields_1237 (with "s")
$('#fields_1237').focus(function(e){
//do some stuff
});

If you refer to normal select element, I think that should be enough to trigger focus event.
But for pseudo select element like those in multi select, it's not applicable because the actual element is hidden, wrapped with other unfocusable element.

[pepe]

Hi Edi,
thank you for your input! It seems to be more complicated than this. All these obvious variations I have tried before and none of them worked out. I have formatted / intended all related code lines shown below:
-------------------------------------------------------------------------------------------------------------
<div class="form-group form-group-1237 form-group-fieldtype_users">
<label class="col-md-3 control-label" for="fields_1237">
<span class="required-label">*</span>
Verantwortlich | User</label>
<div class="col-md-9">
<div id="fields_1237_rendered_value">
<select name="fields[1237]" id="fields_1237" class="form-control chosen-select input-large field_1237 required" style="display: none;">
<option value="">None</option>
<optgroup label="Aufragnehmer">
<option value="21">Contractor C.</option>
<option value="28">Contractor2 C.</option>
</optgroup>
<optgroup label="Entwicklung">
<option value="24">Developer D.</option>
</optgroup>
<optgroup label="keine Lizenz">
<option value="31">Keinelizenz K.</option>
</optgroup>
<optgroup label="Kunde/Behörde">
<option value="27">Bauherr B.</option>
<option value="25">Behörde B.</option>
</optgroup>
<optgroup label="Management">
<option selected="" value="22">Manager M.</option>
<option value="23">Manager2 M.</option>
<option value="20">Pepe P. (Manager)</option>
</optgroup>
<optgroup label="Verwaltung">
<option value="30">test test</option>
<option value="26">Verwalter V.</option>
</optgroup>
</select>
<div class="chosen-container chosen-container-single" title="" id="fields_1237_chosen" style="width: 320px;">
<a class="chosen-single">
<input class="chosen-focus-input" type="text" autocomplete="off">
<span>
<b class="group-name">Management</b>
Manager M.</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input class="chosen-search-input" type="text" autocomplete="off">
</div>
<ul class="chosen-results"></ul>
</div>
</div>
<label id="fields_1237-error" class="error" for="fields_1237"></label>
<script>
$("#fields_1237").on("change", function(e) {
$("#fields_1237-error").hide();
});
</script>
</div>
</div>
</div>
-------------------------------------------------------------------------------------------------------------
and this selector does get the FOCUS event:
$('#fields_1237_chosen').find('input').focus(function (){
// do some stuff .....
});

The above seems to be obvious since Sergey gave the input element the class="chosen-focus-input"!!
Thanks again,
Pepe

[eddydeniro]

Yes, that's what I meant with the pseudo select element.
The select #fields_1237 is hidden, the wrapper #fields_1237_chosen from chosen plugin that display the choices doesnt receive focus. So the most possible scenario is to directly change the value as the form opens, not when it receives focus.

Code: Select all

//Lets say you want to set valueA
$('#fields_1237').value(valueA).trigger('chosen:updated');

Hi Edi,
thank you for your input! It seems to be more complicated than this. All these obvious variations I have tried before and none of them worked out. I have formatted / intended all related code lines shown below:
-------------------------------------------------------------------------------------------------------------
<div class="form-group form-group-1237 form-group-fieldtype_users">
<label class="col-md-3 control-label" for="fields_1237">
<span class="required-label">*</span>
Verantwortlich | User</label>
<div class="col-md-9">
<div id="fields_1237_rendered_value">
<select name="fields[1237]" id="fields_1237" class="form-control chosen-select input-large field_1237 required" style="display: none;">
<option value="">None</option>
<optgroup label="Aufragnehmer">
<option value="21">Contractor C.</option>
<option value="28">Contractor2 C.</option>
</optgroup>
<optgroup label="Entwicklung">
<option value="24">Developer D.</option>
</optgroup>
<optgroup label="keine Lizenz">
<option value="31">Keinelizenz K.</option>
</optgroup>
<optgroup label="Kunde/Behörde">
<option value="27">Bauherr B.</option>
<option value="25">Behörde B.</option>
</optgroup>
<optgroup label="Management">
<option selected="" value="22">Manager M.</option>
<option value="23">Manager2 M.</option>
<option value="20">Pepe P. (Manager)</option>
</optgroup>
<optgroup label="Verwaltung">
<option value="30">test test</option>
<option value="26">Verwalter V.</option>
</optgroup>
</select>
<div class="chosen-container chosen-container-single" title="" id="fields_1237_chosen" style="width: 320px;">
<a class="chosen-single">
<input class="chosen-focus-input" type="text" autocomplete="off">
<span>
<b class="group-name">Management</b>
Manager M.</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input class="chosen-search-input" type="text" autocomplete="off">
</div>
<ul class="chosen-results"></ul>
</div>
</div>
<label id="fields_1237-error" class="error" for="fields_1237"></label>
<script>
$("#fields_1237").on("change", function(e) {
$("#fields_1237-error").hide();
});
</script>
</div>
</div>
</div>
-------------------------------------------------------------------------------------------------------------
and this selector does get the FOCUS event:
$('#fields_1237_chosen').find('input').focus(function (){
// do some stuff .....
});

The above seems to be obvious since Sergey gave the input element the class="chosen-focus-input"!!
Thanks again,
Pepe

[eddydeniro]

Or this is what comes into my mind

Code: Select all

$('#fields_1237_chosen').click(function(){
  if(!$('#fields_1237').val()){
  	//Say you want to pick "Contractor C" first time the user clicked it
      $('#fields_1237 ').val(21).trigger('chosen:updated');
  }
})