I have an parent SiliComponent and child SiliChildComponent.
Within SiliChildComponent I have an #Input() expdays:any[];
This is added within ngOnChanges interfaces like this:
Angular4 SiliChildComponent
data:any;
#Input() expdays:any[];
ngOnChanges() {
this.data = this.expdays;
}
**HTML from parent component SiliComponent **
<select (ngModelChange)="changeCar($event)">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
<expdays [expdays]='exp_searchData'></expdays>
HTML from child component SiliChildComponent where I am using the #Input data
<div *ngFor="let x of data" >
{{x}}
</div>
Fixed problem:
The issue was in another place of my code.
Related
When I select an option, I want to remove selected attribute from old one and add it to option I selected.
HTML Code:
<label>Gender</label>
<select id="gender" name="gender" class="form-control" onchange="redirect()">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="any">Any</option>
</select>
JS Code:
<script>
$("#gender").on("change", function redirect() {
// const queryStr = "gender=any&platform=any"
// const usp = new URLSearchParams(queryStr)
// console.log(usp)
url = window.location.href.split("?")[0] + "?gender=" + this.value + "&platform=<%=platform%>"
location.replace(url)
})
</script>
I'm not sure if there's something wrong with my code or it's an existing bug with lit-html?
I'm trying to get value of the selected item when button is clicked.
number.js
<select class="form-control" name="number">
<option ?selected=${this.number === 1} value="1">One</option>
<option ?selected=${this.number === 2} value="2">Two</option>
<option ?selected=${this.number === 3} value="3">Three</option>
</select>
<button type="button" #click=${getSelectedValue}>Get Selected Value</button>
getSelectedValue() {
const selectOptions = this.querySelector('select[name="number"]');
const selectedValue = selectOptions.options[selectOptions.selectedIndex].value;
}
I've tried selectOptions.value but I still can't get the selected value.
Note that, I've added createRenderRoot() {return this;} to disable the shadowDOM.
I have a user update form that I'm working on. The user can pick an option from a select menu, and that option gets saved to the db as a string.
<select name="morality" id="morality">
<option value="">Choose down below!</option>
<option value="Good"> Good</option>
<option value="Neutral">Neutral</option>
<option value="Evil">Evil</option>
</select>
When the user picks an option, I'm able to post to the database. When I reload the page, I'd like to get the chosen value and use it to add a selected attribute to the corresponding option. So if a person picks Neutral and saves it, I'd like to show...
<select name="morality" id="morality">
<option value="">Choose down below!</option>
<option value="Good"> Good</option>
<option value="Neutral" selected >Neutral</option>
<option value="Evil">Evil</option>
</select>
you have to pass value morality to view when rendering page :
router.get('/edit/:id', function(req, res) {
Model.findOne({_id:req.params.id},function(err,data){
if(!err && data){
res.render('home',{morality:data.morality});
// or you can pass whole data object to view
//res.render('home',{data:data});
// inside view {{data.morality}}
}
});
});
and in view add condition like this :
<select name="morality" id="morality">
<option value="" {{morality==''?'selected':''}}>Choose down below!</option>
<option value="Good" {{morality=='Good'?'selected':''}}> Good</option>
<option value="Neutral" {{morality=='Neutral'?'selected':''}}>Neutral</option>
<option value="Evil" {{morality=='Evil'?'selected':''}}>Evil</option>
</select>
I want to change the src attribute of image according to the selection of drop list menu. For example, the droplist contains "Peter, Henry, David", the image will show different images accordingly to the name (something like peter.png, henry.png, david.png, or 1.png, 2.png, 3.png)
So here is what I did. However, it didn't work. I don't know what I missed here.
<select id="name" name="name">
<option value="">Please select...</option>
<option value="Peter">Peter</option>
<option value="Henry">Henry</option>
<option value="David">David</option>
</select>
<img src="default.png" id="imageholder" alt="imageholder" />
<script type="text/javascript">
$(document).ready(function() {
$("#name").change(function() {
var nameholder= $("#name").val();
$('#imageholder').attr('src', nameholder + ".png" );
});
})
</script>
In a jsp page ,I am presenting the customer with drop down lists to select creditcardtype,expiration month,expiration year of credit card.
I am looking at ways the necessary strings for this can be put ,other than hardcoding them in html.
thanks
mark
<tr>
<td>
<select id="creditCardType" title="select card type" name="creditCardType">
<option value="M0">MasterCard</option>
<option value="D0">Discover</option>
<option value="J0">JCB</option>
<option value="I0">Diners Club</option>
<option value="A0">American Express</option>
<option value="V0">Visa</option>
<option value="V">Amazon.com Visa</option>
<option value="G21">Amazon.com Store Card</option>
</select>
</td>
</tr>
<tr>
<td>Expiration Date</td>
<td>
<select id="cardexpiryMonth" name="cardexpiryMonth">
<option value="01" selected="selected">01</option>
<option value="02" >02</option>
<option value="03" >03</option>
<option value="04" >04</option>
<option value="05" >05</option>
<option value="06" >06</option>
<option value="07" >07</option>
<option value="08" >08</option>
<option value="09" >09</option>
<option value="10" >10</option>
<option value="11" >11</option>
<option value="12" >12</option>
</select>
</td>
<td>
<select id="cardexpiryYear" name="cardexpiryYear">
<option value="2011" >2011</option>
<option value="2012" selected="selected">2012</option>
<option value="2013" >2013</option>
<option value="2014" >2014</option>
<option value="2015" >2015</option>
<option value="2016" >2016</option>
<option value="2017" >2017</option>
<option value="2018" >2018</option>
<option value="2019" >2019</option>
<option value="2020" >2020</option>
<option value="2021" >2021</option>
<option value="2022" >2022</option>
<option value="2023" >2023</option>
<option value="2024" >2024</option>
<option value="2025" >2025</option>
<option value="2026" >2026</option>
<option value="2027" >2027</option>
<option value="2028" >2028</option>
<option value="2029" >2029</option>
<option value="2030" >2030</option>
<option value="2031" >2031</option>
</select>
</td>
</tr>
If it are application wide constants, just put them in the application scope during application startup. The application scope is represented by the object being an attribute of ServletContext. See also How do servlets work? Instantiation, sessions, shared variables and multithreading
CDI available?
If CDI happens to be available in your environment (i.e. you're running a normal JEE server such as WildFly, Payara, TomEE, etc), then just use an #ApplicationScoped bean instead of a ServletContextListener.
#Named #ApplicationScoped
public class Data {
private Map<String, String> creditCardTypes;
#PostConstruct
public void init() {
creditCardTypes = new LinkedHashMap<String, String>();
creditCardTypes.put("M0", "MasterCard");
creditCardTypes.put("D0", "Discover");
// ...
}
public Map<String, String> getCreditCardTypes() {
return creditCardTypes;
}
}
(note that I used LinkedHashMap as it maintains insertion order in contrary to HashMap)
This way it's available as ${data.creditCardTypes} by EL in any JSP. You can then use JSTL <c:forEach> to iterate over it. It also supports iterating over a Map and each iteration will give a Map.Entry back which in turn has getKey() and getValue() methods which are accessible in EL as well.
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
...
<select id="creditCardType" title="select card type" name="creditCardType">
<c:forEach items="${data.creditCardTypes}" var="creditCardType">
<option value="${creditCardType.key}">${creditCardType.value}</option>
</c:forEach>
</select>
No CDI available?
If CDI is not available (i.e. you're not running a normal JEE server, such as Tomcat, Jetty, Undertow, etc, and you don't want to install CDI for some reason), then you can use the init() method of an arbitrary servlet or, better, a ServletContextListener.
#WebListener
public class Data implements ServletContextListener {
private Map<String, String> creditCardTypes;
#Override
public void contextInitialized(ServletContextEvent event) {
creditCardTypes = new LinkedHashMap<String, String>();
creditCardTypes.put("M0", "MasterCard");
creditCardTypes.put("D0", "Discover");
// ...
event.getServletContext().setAttribute("data", this);
}
public Map<String, String> getCreditCardTypes() {
return creditCardTypes;
}
}
This way it's also available as ${data.creditCardTypes} by EL in any JSP.
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
...
<select id="creditCardType" title="select card type" name="creditCardType">
<c:forEach items="${data.creditCardTypes}" var="creditCardType">
<option value="${creditCardType.key}">${creditCardType.value}</option>
</c:forEach>
</select>
If you're using Spring (2.5/3.0) then have a look at #ModelAttribute