I'm using HTML <select> Tag, so as it is known allready:
The element is used to create a drop-down list.
The tags inside the element define the available
options in the list.
I want to achieve next thing:
after I select value in a drop-down list I would like to set select's value to a default value which is "-/-" ..
Here is how it looks:
And code:
<div class="form-group">
<label class="control-label dash-control-label col-sm-3" for="">Select Select2:</label>
<div class="col-sm-3">
<select id="taxSelect" class="form-control dash-form-control select2" style="width: 100%;" data-minimum-results-for-search="Infinity">
<option disabled [ngValue]="null" >-/-</option>
<option *ngFor="let code of codes" [value]="code.id">
{{code.title}}
</option>
</select>
</div>
I mean when I open modal again I want to see "-/-" as it is default value, and not the value that I previously selected.. So basically onSubmit() in typescript I would like to reset to set again "-/-" as a default value..
P.S I've tried:
show() {
$('select').val('0');
$('select').val($('select').children().eq(0).val());
$('select2').val('0');
$('select2').val($('select').children().eq(0).val());
$("select[title='-/-']").attr('selected', 'selected');
}
So basically when Modal is shown I wanted to reset drop-down values to "-/-" but it doesn't work..
Thanks a lot guys!
CHEERS!
Related
I have following code for my dropdown menu. How can I set a value as selected?
<div class="input-group mb-3">
<label class="input-group-text labelDropDown" for="inputGroupSelect01">Art der
Integration</label>
<select class="form-select" id="inputGroupSelect01" formControlName="integrationType">
<option value="statisch">statisch</option>
<option value="dynamisch">dynamisch</option>
<option value="nein">nein</option>
</select>
</div>
I thought it will be selected if I type in the selected keyword? Why does angular not do this?
I think this work for you:
Use selected in the <option> tag
<div class="input-group mb-3">
<label class="input-group-text labelDropDown" for="inputGroupSelect01">Art der
Integration</label>
<select class="form-select" id="inputGroupSelect01" formControlName="integrationType">
<option value="statisch">statisch</option>
<option value="dynamisch">dynamisch</option>
<option value="nein" selected>nein</option>
</select>
</div>
Selected is an boolean parameter from the HTML Element select
so you have set it to true for the specific option element.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
Alternative Solutions:
use selectedHTMLEl.selectedIndex
sets the selected Option by the Index of Option
The selected value is defined by the formControl you bound it to. Once you give the FormControl integrationType a value, this value will be selected. If you set nein as it's value, the 3rd option neinwill be selected.
Example edit value after init
this.myFormGroup.get('integrationType').setValue('nein');
Example with value on init
this.myFormGroup = this.formBuilder.group({
integrationType: ['nein'],
});
<form>
<div class="form-group">
<label for="sel1 primary"></label>
<select class="form-control" id="sel1">
<option *ngFor="let group of instanceList"(click)="change_group(group.name)" > {{group.name}}
</option>
</select>
</div>
</form>
Sorry for bad indentation.
Instancelist list is the array of object contain, id, name, groupnumber.
I want to get the value of selected option in my calling method and want to display it in console.
function change_group(groupname){
this.change_to=groupname;
console.log(change_to);
}
The problem is, the given function not even call upon selecting value in dropdown.
Why not leave the option tags alone and just subscribe to the selection changed event in the <select> tag
<select class="form-control" id="sel1" (change)="onGroupChange($event)">
(click) on <option> is usually not how to do it.
Use instead ngModel
<select class="form-control" id="sel1" ngModel (ngModelChange)="change_group($event)">
<option *ngFor="let group of instanceList" [ngValue]="group"> {{group.name}}
</option>
I am trying to automate a form being filled out with the webbrowser control for VB.NET
The problem is that there is two comboboxes, the second having its values generated depending on the first one.
I can get the correct index to be selected for the first combobox, but for the second the values are never generated. I have to manually select another value for the first combobox and then the second is populated.
I have tried setting/removing focus of the first combobox to try and get the second to populate, but that has not worked.
My current code is:
''Select from the first combo box
Dim make As HtmlElement
make = WebBrowser1.Document.GetElementById("cars.carmake_s")
make.SetAttribute("selectedIndex", 1)
WebBrowser1.Update()
''Should select the second value, but doesn't
Dim model As HtmlElement
model = WebBrowser1.Document.GetElementById("cars.carmake_s+cars.carmodel_s")
model.SetAttribute("selectedIndex", 2)
WebBrowser1.Update()
The HTML code that I am playing with is (cut down):
<div class="form-row clearfix">
<label for="cars.carmake_s">
Make<span class="orange">*</span>
</label>
<div class="form-value">
<div class="c-select-list c-slctbx-medium">
<span class="c-icon c-icon-arrow-green-down"></span>
<select id="cars.carmake_s" name="attributeMap[cars.carmake_s]" class="c-slctbx-depnode c-slctbx-medium" name="attributeMap[cars.carmake_s]"><option value="">Please choose</option>
<option value="alpharomeo"
>
Alfa Romeo</option>
....
...
...
</select></div>
</div>
<div class="form-row clearfix">
<label for="cars.carmodel_s">
Model<span class="orange">*</span>
</label>
<div class="form-value">
<div class="c-select-list c-slctbx-medium">
<span class="c-icon c-icon-arrow-green-down"></span>
<!-->####This is the second combobox and gets populated depending on the first combobox<!-->
<select id="cars.carmake_s+cars.carmodel_s" name="attributeMap[cars.carmodel_s]" class=" c-slctbx-medium" name="attributeMap[cars.carmodel_s]"><option value="">Please choose</option>
</select></div>
</div>
</div>
You might try the following:
curElement.SetAttribute("Value", "Value You Want")
curElement.RaiseEvent("onchange")
I'd this html code:
<li>
<label>
<input type="radio" name="payment[ebzc_option]" value="saved" />Saved</label>
<div class="input-box">
<select name="payment[ebzc_method_id]">
<option value="">Please select...</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</li>
<li>
<label>
<input type="radio" name="payment[ebzc_option]" value="saved" />New</label>
<div class="input-box">
<select name="payment[ebzc_method_id]">
<option value="">Please select...</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
</li>
and I need to toggle the <div class="input-box"> adjacent to the checked radio (name="payment[ebzc_option]") button using prototype.
Can anybody help me to do this? I'd not worked on prototype before.
any hint on selecting radio button by name attribute (name="payment[ebzc_option]") in prototype.js
Set up a function that you can call both at page load and whenever a radio button is clicked.
function setSubmenuVisibility(){
$$('input[type="radio"]').each(function(elm){
if(elm.up('label') && elm.up('label').next('div')){
var sub = elm.up('label').next('div');
if(elm.checked){
sub.show();
}else{
sub.hide();
}
}
});
}
setSubmenuVisibility();
document.on('click', 'input[type="radio"]', function(evt, elm){
setSubmenuVisibility();
});
You can toggle the visibility using Element.toggle
Many ways to do this
you could use the DOM traversal methods if the HTML will be the same
$$('input[name="payment[ebzc_option]"]').invoke('observe','click',function(){
this.nextSiblings().first().toggle();
});
In this instance we use $$() to select all of the radio buttons with the name attribute payment[ebzc_option] and use the invoke() method to call observe() on all of them. In the closure of the event handler this is the element the event happened on, then you collect all of the next siblings using nextSiblings(), pick the first() one out of the array and run toggle() on it.
This is not ideal because it depends on the HTML structure to stay the same.
Lets try adding an id to the divs you want to toggle (ids need to be unique like you discovered), and lets add that id to the radio button in a data attribute. Data attributes can be anything you want just need to start with data-
<div class="input-box" id="input-box_saved">
<input type="radio" name="payment[ebzc_option]" value="saved" data-toggle="input-box_saved" />
Now our observer statement changes to
$$('input[name="payment[ebzc_option]"]').invoke('observe','click',function(){
$(this.readAttribute('data-toggle')).toggle();
});
you could even extend the observer closure to make sure only one of the divs is open at a time
$$('input[name="payment[ebzc_option]"]').invoke('observe','click',function(){
$$('.input-box').invoke('hide');
$(this.readAttribute('data-toggle')).show();
});
EDIT I missed that the <input> and <div> were not siblings as the closing </label> was going off the right side of the box. In this instance the DOM traversal would be a bit more up() and down() to get it to work.
I want to fill a HTML form, I am using mechanize module of python.
my HTML code is like that for checkbox and dropdown is :
<div id="post_cd">
<input role="checkbox" id="cd_info" class="cbox" type="checkbox">
<span class="s-iso" style="display:none"></div>
<label for="type" id="cdtype" class="cd" style="width:60px;margin:1px;float:left;text-align:right;">CD type:</label>
<select id='cdtype' class=" ui-iso" style="width:100px;margin:1px;float:left;">
<option value="CD1">Error1</option>
<option value="CD2">Error1</option>
<option value="CD3">Error2</option>
</select>
I have tried with following but getting errors:
for checkbox: form.find_control("cd_info").items[0].selected = True
for dropdown: form['cdtype']= ['Error1']
error:
raise ControlNotFoundError("no control matching "+description)
mechanize._form.ControlNotFoundError: no control matching name 'cd_info'
raise ControlNotFoundError("no control matching "+description)
mechanize._form.ControlNotFoundError: no control matching name 'cdtype'
There is no <form> in your HTML code. So probably form is not pointing to an element around the HTML code you provide at the moment you call find_control or the subscription operator.
You can try to print the text of the form to be sure you are looking at the right thing:
print form